2 bakgrunnsbilder i samme element

[Gomlers]

Jeg trenger å vise to bakgrunnsbilder i et element (horisontal meny øverst på siden).

Det ene er top-line-bg.gif som repeterer seg selv - x bortover hele bredden med en faded farge.

Det andre er et bilde som skal stå ca. 200px fra høyre-margen på menyen.
Menyen består naturligvis av linker som skrives ut via php.

Noen som har noen gode forslag?

Har dessverre ingen ting å vise til av eksempel, siden dette er lokalt.

 

[Gaasehud]

Du kan enten bruke to divs (finnes mange løsninger, just google it), eller gå for multiple backgrounds. Sistnevnte er CSS3 og fungerer egentlig ikke i IE. Dog kan du få det til å funke, ved hjelp av CSS3 PIE. Har skrevet en guide på det her, og bruker det også på den bloggen.

Lykke til!

 

[Gomlers]

Takk for det mattisaas.

Jeg endte opp med å bruke 2xdiv's funker ok.
Venter med css3 til det støttes tror jeg

Problemet nå, er at IE7 viser jo den ene bakgrunnen min et par hundre pixler for kort, mens IE6 ikke viser det i det hele tatt.

IE8, opera, Firefox og Safari har alle skjønt hva jeg mener, så der er det greit.

CSS'n for bakgrunnsbilde mitt er så her:

.top-nav-bg2 {
position:absolute;
right:563px;
background: url("../images/top_nav_bg2.png") no-repeat bottom;
height: 33px;
width: 45px;
}

Og denne står inni første div så her:

#top_nav {
background: #cb66e3 url("../images/top_nav_bg.gif");
bakground-repeat: repeat-x;
font: bold 12px arial, tahoma;
text-transform: uppercase;
margin: 0em;
height: 26px;
}

Jeg er ikke noe guru på det her, så jeg takker for all hjelp!

 

[Gomlers]

Fikk det til..

Forandret til
Position: relative;
og brukte float left, med litt marginsnacks..

Men, takk for hjelp anyway!

 

[Gaasehud]

Bra! Position blir ofte litt fy-fy, og float redder de fleste. Supert at du skriver hvordan du fikk det til (er så irriterende når folk skriver "nvm, fant ut av det" og ikke noe mer).