Über zwei Klassen das Hintergrundbild positionieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
art
attribut
bild
code
fehler
grad
hilfe
hintergrund
hintergrundbild
hintergrundfarbe
klasse
opus
position
positionieren
realisieren
rutsch
schlauch
url
zusammenfassung
-
Hallo!
Ich stehe gerade vor einem Problem: Ich möchte einem Div ein Hintergrundbild zuweisen und es mit Hilfe von 2 Klassen positionieren.
Sinn und Zweck ist es, das Ausgangsbild auf 35 divs aufzuteilen und passend zu positionieren.
Mein HTML sieht gekürzt so aus:
<div id="wrapper_cleaning"> <div class="broom no1 dirty4" name="handle"></div> <div class="broom no2 dirty4" name="handle"></div> <div class="broom no3 dirty4" name="handle"></div> <div class="broom no4 dirty4" name="handle"></div> <div class="broom no5 dirty4" name="handle"></div> </div>
Und das CSS dazu:
.broom { display:inline-block; width:3em; height:3em; width:10px; height:35px; float:left; background-image:url("../img/grooming_broom_demo.gif"); } .no1 { background-position:0 top; } .no2 { background-position:-10px top; } .no3 { background-position:-20px top; } .no4 { background-position:-30px top; } .no5 { background-position:-40px top; }
In der Klasse "broom" definiere ich die Grundangaben und das Bild, dass den Besen darstellt. Die Klassen "no" zeigen die Nummer des Divs an und verschieben das Hintergrundbild (definiert über die Klasse "broom"), damit das Bild richtig zusammengesetzt wird.
Mit JavaScript wird die Klasse "dirty4" bis zu "dirty1" bei entsprechenden Evens herunter gezählt und schließlich zu "clean" gewechselt. Soweit funktioniert es.
Nun habe ich aber die Grafiken für die unterschiedlichen Verschmutzungszustände in ein Sprite gesetzt und kann jetzt nicht einfach die Bildadresse wechseln. Wenn z. B. die Klasse "clean" gesetzt ist, muss das Hintergrundbild also am unteren Rand ausgerichtet werden.
Um das zu erreichen habe ich versucht, nur eine vertikale Hintergrundposition zu definieren, bin daran aber gescheidert...
.broom.clean { background-position: inherit bottom; }
Dieser Code wird von Firefox nicht interpretiert und eine horizontale Ausrichtung kann ich in dieser Klasse nicht angeben, da sie auf alle Elemente mit jeder "no"-Klasse gesetzt wird.
Gibt es etwa keinen Weg mit zwei Klassen den Hintergrund zu positionieren - also jeweils auf einer Achse?
Ich bin für jede Art von Hilfe sehr dankbar, da ich keine Ahnung habe,wie ich das Projekt sonst realisieren soll.
Grüße
things -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ein möglicher Fehler liegt in der Zusammenfassung der Attribute für background-postition
Du schreibst z.B.:
background-position:-10px top;
Was, ohne Zusammenfassung, so zu lesen ist:
background-position:-10px top -10px top;
Nach geltenden Regelungen in folgender Form zu interpretieren:
background-position:oben rechts unten links
Fällt Dir was auf?
-
fatfreddy schrieb:
Ein möglicher Fehler liegt in der Zusammenfassung der Attribute für background-postition...
Wieso Zusammenfassung? Background-position definiert doch nur nur 2 Werte - horizontal und vertikal.
Oder stehe ich jetzt gerade auf dem Schlauch .....
@things:
Hast du dein Konstrukt mal in einem anderen Browser angesehen?
Oder mal das versucht:
.broom.clean { background-position-y: bottom !important; } -
pcw schrieb:
Wieso Zusammenfassung? Background-position definiert doch nur nur 2 Werte - horizontal und vertikal.
Oder stehe ich jetzt gerade auf dem Schlauch .....
Autsch! *hüstl* *schäm* Der Schlauch war wohl unter meinen Füßen. Du hast natürlich recht.
-
Hallo! ^^
Uff, da bin ich ja froh, hab mich grad schon erschreckt! Ich träume ja fast schon HTML und CSS und dann so ein Fehler wäre ja blamabel *lol*
Danke für den Hinweis! Die background-position-y habe ich inzwischen mal ausprobiert und habe leider bemerkt, dass diese Definition von Firefox und Opera nicht unterstützt wird. Damit ist sie so gut wie wertlos. ._.
Der ganze Spaß ist natürlich auch mit JavaScript zu lösen, aber das möchte ich weitestgehend vermeiden...
Gibt es noch eine Idee für eine schöne Lösung? :S
Schonmal vielen Dank und guten Rutsch ;D
Grüße
things -
Hm .... Rätselraten...
Ein Live-Beispiel wäre natürlich wesentlich hilfreicher, aber du könntest ja mal folgendes probieren:
.broom { ... /* deine Angaben */ ... background-attachment: fixed; }
-
Moin!
Du willst Livecode? Du kriegst Livecode! ^o^
Einmal bitte hier klicken!
Das geht aktuell leider nur im Firefox, weil ich mit dem draggable-HTML5-Zeug noch nicht so klar komme x_x Der Einfachheit halber habe ich den dirty-Klassen eine Hintergrundfarbe zugewiesen, damit man was sehen kann. Mit den unterschiedlichen Farben sollte ein anderer Teil des Bildes angezeigt werden.
background-attachment ändert zwar die Position des Bildes, aber für die Veränderung per Klasse hilft es mir grade nicht weiter...
Ich freue mich weithin über Hilfe jeder Art!
Grüße
things -
Ich schieb es auf den Firefox. ....
Das sollte funktionieren:
.no1.clean { background-position: 0 bottom; } .no2.clean { background-position: -10px bottom; } .no3.clean { background-position: -20px bottom; } /* und so weiter */
Cheers und guten Rutsch! -
Ja, ist immer gut, wenn man einen Schuldigen hat *lol*
Ja, die Ansprache über die beiden Klassen geht natürlich, aber da schreib ich mich auch blöd bei xD Ich habe wirklich gehofft, dass ich hier noch eine gute Lösung finde, denn mit der Schreiberei für jede no-Klasse in Kombination mit jeder dirty-Klasse (die könnten auch mehr als 4 werden) sind wahnsinnig viel...
Wenn wirklick keiner eine CSS-Lösung kennt, dann werd ich mich wohl mit JavaScript an einen inline-Style setzen, oder die ganzen CSS-Styles von PHP schreiben lassen o3o
Oder ich habe viel Glück und Firefox und Opera unterstützen ab jetzt-gleich-sofort background-position-x/-y ...
Ich wünsche euch ein frohes neues Jahr und nochmal vielen Dank für die Hilfe!
Grüße
things -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
