Ibland vill man jobba med två olika bakgrundsbilder på en sajt. Här på avtramp.se tyckte vi till exempel att det skulle vara trevligt och vi ville ju inte bryta loss en div från vår centrerade layout för att åstadkomma det hela. Så vi använde oss av ett litet CSS3-trick och använde två bilder i body.
Javisst, numera stöds detta av alla större browsers. I bland kanske du vill ha två olika bilder som bakgrund och då kan man lösa detta genom följande kodbit:
body {
background-image: url('bild1.jpg'), url('bild2.jpg');
background-repeat: repeat-x, repeat;
}
Detta använder vi oss av här på avtramp.se då träpanelen är motsvarande bild1 och den gråa strukturen motsvarar bild2. I raden under säger vi att träpanelen ska repeteras i x-led medan den gråa bilden ska repeteras i både x- och y-led.
Skulle vi vända på ordningen i background-image så hade inte träpanelen synts då den hade placerats under den den gråa bilden. Något att ha i åtanke om din ena bild inte syns. Alltså, översta bilden först.
Positionering kan göras genom background-position med värden separerade med kommatecken enligt exemplet ovan. Läs mer på css3.info eller på W3.org.
