Linke und rechte Hintergrundbilder, in CSS

Ist es möglich, ein Bild für einen Hintergrund und zwei andere für die linke und rechte Seite zu verwenden? Ich weiß, dass dies mit einer Tabelle möglich ist, aber ich möchte, dass diese skalierbar ist.Linke und rechte Hintergrundbilder, in CSS

header {background-image: x.jpg left(y.jpg) right(z.jpg);}

Gibt es etwas so?

Mit Tabellen, ich war so etwas wie dieses Denken ist möglich:

<td background="x.jpg">Left side</td> 
<td background="y.jpg">Center, title.</td> 
<td background="z.jpg">Right side</td>

Quelle

2010-12-17 Captain Lightning

Sie können einen einzelnen Hintergrund anwenden (die ein Bild sein kann) zu einem einzigen Element.

Wenn Sie drei Hintergründe benötigen, benötigen Sie drei Elemente. Wenn Sie möchten, dass diese Elemente nebeneinander erscheinen, müssen Sie sie nebeneinander positionieren (was auf verschiedene Arten möglich ist). Sie können die Position des Hintergrunds eines Elements weiter manipulieren, indem Sie background-position verwenden, was Sie möglicherweise tun müssen, da die Ausrichtung von Hintergründen völlig unabhängig ist.

Der einzige Grund, dies funktioniert für eine Tabelle (die Sie wie die Pest vermeiden sollten, wenn der Inhalt der Tabelle tatsächlich Tabellendaten ist) ist, weil Sie drei Elemente haben.

Quelle

2010-12-17 16:11:52 annakata

Etwas wie: http://pastebin.com/bnnCQH6M? –

Mehrere Hintergrundbilder kommen, und es gibt eine begrenzte Menge, die Sie sofort mit der Unterstützung für CSS3 border-image tun können, aber im Moment gibt es keine gute, simple-Element, Browser-übergreifende Möglichkeit es zu tun.

Quelle

2010-12-17 16:20:40

Ich freue mich darauf, aber jetzt sieht es so aus, als müsste ich Tabellen verwenden. –

Wenn Sie sich das Problem angesehen haben und Tabellen als einzige Antwort gesehen haben und Sie für mich gearbeitet haben, würden Sie sofort sagen können, dass Sie * für mich * gearbeitet haben. Verwenden Sie nur Tabellen *, wenn Sie mit Tabellendaten arbeiten. –

Haha, ich hasse Tische genauso wie der nächste Typ, ich habe Witze gemacht. Punkt jedoch genommen. –

Dieser arbeitete für mich:

#hb-header { 
height: 64px; 
vertical-align: middle; 
} 
#hb-header .headleft { 
float: left; 
width: 64px; 
height: 100%; 
background-image: url('HeaderLogoLeft.png'); 
background-repeat: no-repeat; 
background-position: 0 0; 
} 
#hb-header .headcenter { 
height: 100%; 
} 
#hb-header .headright { 
float: right; 
height: 100%; 
background-image: url('HeaderLogoRight.png'); 
background-repeat: no-repeat; 
background-position: right; 
} 


<div id='hb-header' class='hb-header ui-widget-header ui-corner-all'> 
    <div class='headleft'></div> 
    <div class='headright'> 
     <div style='margin-right: 72px;'> 
      Version ${buildNumber} 
      <div id='login' style='display:none;'><span id='login-user'></span> 
       <button type='button' id='logout' onclick="logout();" style='font-size:70%; line-height:1.0; padding:0.25em;'>Sign Out</button> 
      </div> 
     </div> 
    </div> 
    <div class='headcenter'> 
     <h3 style='margin-left:72px;'>Hello World</h3> 
    </div> 
</div>

Quelle

2013-01-04 22:39:11

Linke und rechte Hintergrundbilder, in CSS

Antwort

Verwandte Themen