Hintergrundgrafik mit runden Ecken - Verständnisfrage

[jobo]

Hallo,

auf einer Seiten (Wordpress mit einem Theme von YOOTheme finden sich zB. für den Hintergrund des Menüs ein Bild. Wenn ich mir das Anzeigen lasse ist es zwar eigentlich EIN .png, das hat aber drei Teile, oben Linksuntenrund, in der Mitte Rechtsuntenrund und darunter eins Grade rechts und links.

Wie baut dein die background-url die Teilen zusammen? Wenn ich das downloade, ist es EIN png. Eben mit diesen drei Bildchen drin. Dass die rechts-links-mitte zusammengesetzt werden scheint klar, aber wie geht das.

Ich finde sogar noch andere Background-pngs die mehr als drei visuell untereinander dargestellte "Einzelbilder" enthalten.

Gruß

jobo

[Matthias Apsel]

Om nah hoo pez nyeetz, jobo!

Wie baut dein die background-url die Teilen zusammen? Wenn ich das downloade, ist es EIN png. Eben mit diesen drei Bildchen drin.

Befrag doch mal das Entwicklerwerkzeug deiner Wahl!

Matthias

[jobo]

Hallo Mathias,

Wie baut dein die background-url die Teilen zusammen? Wenn ich das downloade, ist es EIN png. Eben mit diesen drei Bildchen drin.

Befrag doch mal das Entwicklerwerkzeug deiner Wahl!

Welches Entwicklerwerkzeug? Und wonach? Den Quelltext? Die Grafik?

Gruß

jobo

[Matthias Apsel]

Om nah hoo pez nyeetz, jobo!

Welches Entwicklerwerkzeug? Und wonach? Den Quelltext? Die Grafik?

Firebug, Chromebug, Dragonfly

Rechtsklick auf das zu untersuchende Element, --> Element untersuchen und schauen, welche Eigenschaften auf das Element angewendet werden

Matthias

[jobo]

Hallo,

Om nah hoo pez nyeetz, jobo!

Welches Entwicklerwerkzeug? Und wonach? Den Quelltext? Die Grafik?

Firebug, Chromebug, Dragonfly

Rechtsklick auf das zu untersuchende Element, --> Element untersuchen und schauen, welche Eigenschaften auf das Element angewendet werden

  
<style type="text/css">  
[code lang=css]  
#menubar,  
div.menubar-1,  
div.menubar-2 { background: url(menubar_bg.png) 0 0 no-repeat; }  
  
div.menubar-1 {  
	padding: 0px 10px 0px 10px;  
	background-position: 100% -65px;  
}  
  
div.menubar-2 {  
	height: 55px;  
	background-position: 50% -130px;  
	background-repeat: repeat-x;  
	overflow: hidden;  
}  

</style>
<div id="menubar"><div class="menubar-1"><div class="menubar-2">test</div></div></div>

[/code]

Matthias

Gruß

jobo

[dave]

Hi,

Welches Entwicklerwerkzeug? Und wonach? Den Quelltext? Die Grafik?

Firebug, Chromebug, Dragonfly

In dieser Liste steht nicht "Matthias Apsel" :-P

~dave

[jobo]

Hallo,

<style type="text/css">
[code lang=css]
#menubar,
div.menubar-1,
div.menubar-2 { background: url(menubar_bg.png) 0 0 no-repeat; }

div.menubar-1 {
padding: 0px 10px 0px 10px;
background-position: 100% -65px;
}

div.menubar-2 {
height: 55px;
background-position: 50% -130px;
background-repeat: repeat-x;
overflow: hidden;
}

> </style>  
> <div id="menubar"><div class="menubar-1"><div class="menubar-2">test</div></div></div>  
>   
> [/code]  
  
Wenn ich aber die background-position von 50% raufsetze, ändert sich nischt. Das habe ich nicht ganz kapiert. Die erste Prozentangabe laut [Selfhtml](http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position) bezieht sich auf den Abstand von links. Aber da macht doch 100% keinen Sinn, oder? Der Abstand von oben ist schon klar.  
  
Gruß  
  
jobo

[Cheatah]

Hi,

Wenn ich aber die background-position von 50% raufsetze, ändert sich nischt. Das habe ich nicht ganz kapiert. Die erste Prozentangabe laut Selfhtml bezieht sich auf den Abstand von links. Aber da macht doch 100% keinen Sinn, oder?

die 100%-Marke der Grafik ist an der 100%-Marke des Elements. Sprich: Sie ist ganz rechts.

Cheatah

[Ole.]

Hallo,

die verwendete Technik nennt sich "CSS Sprite".

Gruß
Ole

[jobo]

Hallo,

http://de.wikipedia.org/wiki/CSS-Sprites

Gruß

jobo

[Matthias Apsel]

Om nah hoo pez nyeetz, jobo!

http://de.wikipedia.org/wiki/CSS-Sprites

Dort gibt es noch einen Artikel, dort den Link beachten ;-)

Matthias