WN - CSS - två bakgrunds bilder

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS - två bakgrunds bilder (https://www.wn.se/forum/showthread.php?t=15955)

Hej allihopa!

Jag har problem med stilllmallen till min hemsida. Går det att få så båda bakgrundsbilderna (bg.gif och bg2.gif) visas samtidigt?

Kod:

body {background-image: url(bg.gif); 

background-repeat: no-repeat; background-position: left bottom; background-attachment: fixed;}

och

Kod:

body {background-image: url(bg2.gif); 

background-repeat: no-repeat; background-position: right top; background-attachment: fixed;}

Du förstår kanske bättre ifall du besöker http://jarnheimer.se där förtillfället bara en utav bilderna visas.

Stort tack

nej det går inte..
men du kan lägga en div som container direkt under body så att säga och lägga den andra i den.. I detta fall är det smartaste nog att ta två bilder, sätta ett id på dem, och sedan absolut positionera dem.. med z värde alltså.. För genom att länka in bilderna som img och inte i cssen så kan du ju länka dem om du vill utan js.. Ett annat plus med det framför att lägga dem i absolut positionerade div containers är att det är bättre markup.

Citat:

Originally posted by Björn@Sep 1 2006, 11:45
nej det går inte..
men du kan lägga en div som container direkt under body så att säga och lägga den andra i den.. I detta fall är det smartaste nog att ta två bilder, sätta ett id på dem, och sedan absolut positionera dem.. med z värde alltså.. För genom att länka in bilderna som img och inte i cssen så kan du ju länka dem om du vill utan js.. Ett annat plus med det framför att lägga dem i absolut positionerade div containers är att det är bättre markup.

Kod:

<img src="bg.gif" name="two" border="0" style="position: absolute; right: 0px; top: 0px;">

Med denna kom kommer bg.gif tyvärr framför texten. Vet du möjligtvis hur man ska göra för att den ska placeras längs bak?

Tack

Det här kommer att strula till det för lite äldre och mindre nogräknade webbläsare, men om du vill hålla ner extra markup fungerar det att använda HTML som en container också:

Kod:

html {background-image: url(bg.gif); }

body {background-image: url(bg2.gif); }

Lägg den ena i bg, och den andra i en absolut positionerad div. Om ingen av dem kan vara längst fram så får du antingen se till att positionera allt absolut, så du kan välja nivå på z värdet, eller så floata en div på nåt smart vis.

Citat:

Ursprungligen postat av jarnheimer

Citat:

Ursprungligen postat av Björn

Kod:

img src=bg.gif name=two border=0 style=position absolute; right 0px; top 0px;

Med denna kom kommer bg.gif tyvärr framför texten. Vet du möjligtvis hur man ska göra för att den ska placeras längs bak?
Tack