jobo: Hintergrundgrafik mit runden Ecken - Verständnisfrage

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

  1. 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

    --
    1/z ist kein Blatt Papier.

    1. 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

      1. 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

        --
        1/z ist kein Blatt Papier.

        1. 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

          1. Hi,

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

            Firebug, Chromebug, Dragonfly

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

            ~dave

          2. 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
            
            1. 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

              --
              X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
  2. Hallo,

    die verwendete Technik nennt sich "CSS Sprite".

    Gruß
    Ole

      1. Om nah hoo pez nyeetz, jobo!

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

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

        Matthias

        --
        1/z ist kein Blatt Papier.