nicht angemeldet
background-position: Problem mit CSS Sprite
0 
Matthias Apsel
0
background-position: Problem mit CSS Sprite
Morgen zusammen
Ich grüble gerade über der CSS Eigenschaft background-position im Zusammenhang mit CSS Sprites. Mein Ziel ist es, ein Bild in der linken unteren Ecke eines div Containers zu platzieren, wobei dann ebenfalls noch der anzuzeigende Bereich des Sprites bestimmt werden soll. Das ganze wird dann mittels repeat-x wiederholt angezeigt und stellt somit den sichtbaren unteren Rahmen des Blocks dar.
Das Problem dabei ist, dass ja nur 2 Parameter übergeben werden können, also praktisch in dem Fall left bottom. Zum Auswählen des Bildbereiches müsste ich nun allerdings zusätzlich etwas wie Beispielsweise 0 -50px angeben. Beim oberen Rahmen hatte ich dieses Problem nicht, dort konnte ich ja einfach left -25px angeben weil die Y Position nicht verändert werden sollte.
Eine Lösung wäre nun sicher, das ganze in einen Extra div Block zu packen und diesen dann unten zu positionieren wo der Rahmen entstehen soll. Da ich aber praktisch an einem bestehenden System operiere und lediglich Optimierungen in Sachen Bilder-zu-Sprites vornehme würde ich darauf gerne erstmal verzichten.
Gibt es eine andere Möglichkeit, dies umzusetzen?
-
Om nah hoo pez nyeetz, Tim B!
Ich grüble gerade über der CSS Eigenschaft background-position im Zusammenhang mit CSS Sprites. Mein Ziel ist es, ein Bild in der linken unteren Ecke eines div Containers zu platzieren, wobei dann ebenfalls noch der anzuzeigende Bereich des Sprites bestimmt werden soll. Das ganze wird dann mittels repeat-x wiederholt angezeigt und stellt somit den sichtbaren unteren Rahmen des Blocks dar.
------------------------
| rahmenbild für unten |
------------------------
| rahmenbild für oben |
------------------------könnte der Aufbau des Sprites sein. Dies setzt das Beherrschen multipler Hintergründe voraus.
Gibt es eine andere Möglichkeit, dies umzusetzen?
Matthias
--
1/z ist kein Blatt Papier.
-
Hi,
rahmenbild für unten rahmenbild für oben
könnte der Aufbau des Sprites sein. Dies setzt das Beherrschen multipler Hintergründe voraus.
Wie mach ich jetzt dass bei einem Element variabler Höhe das "rahmenbild für unten" richtig positioniert ist?
background-position:0 bottom; funktioniert da ja nicht…~dave
-
Om nah hoo pez nyeetz, dave!
Wie mach ich jetzt dass bei einem Element variabler Höhe das "rahmenbild für unten" richtig positioniert ist?
background-position:0 bottom; funktioniert da ja nicht…Mit CSS3 ist es möglich, Abstände zu den Rändern, sogenannte Offsets anzugeben. Wiki
Matthias
--
1/z ist kein Blatt Papier.
-
-
Danke für den Tip, ein Sprite habe ich bereits angefertigt. An anderen Stellen der Webseite hat's auch wunderbar geklappt, nur diese unteren Rahmen sind noch mein Problem.
border-image hilft mir da leider auch nicht weiter, da die Eigenschaft nicht vom IE unterstützt wird.
-
-
Hi,
man kann AFAIK bei einem Hintergrundbild nicht angeben dass nur ein bestimmter Ausschnitt davon angezeigt wird.
Gibt es eine andere Möglichkeit, dies umzusetzen?
Evtl. dem Element ein Position:relative geben und ein Pseudo-Element unten in diesem über die ganze Breite positionieren, welches dann den Hintergrund bekommt.
~dave