IE background-image CSS

6 naročnikov

Pozdravljeni!

Background-image sem naredil s css gradientom, poleg gradienta je pa v headerju tudi slika. V vseh brskalnikih to lepo deluje razen v IE. Zato sem za IE naredil poseben div kamor sem vstavil header sliko, ki se prikaže le v IE. Sedaj me pa zanima kako to sliko prikazati nad gradientom ter da bo hkrati pod logo in tekstom?

Trenutna css koda je takšna:

body {

font-size: 11px;
color: #5D717E;
text-align: center;
font-family: Arial, Verdana, Helvetica, Sans-Serif, Tahoma;
background-repeat: no-repeat;
background-position: center top;
background-image:url("../img/body_bg.jpg"), linear-gradient(to bottom, #FFCD02 30%,#FEFCEA 100%);
background-image:url("../img/body_bg.jpg"), -moz-linear-gradient(top, #FFCD02 30%, #FEFCEA 100%);
background-image:url("../img/body_bg.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(30%,#FFCD02), color-stop(100%,#FEFCEA));
background-image:url("../img/body_bg.jpg"), -webkit-linear-gradient(top, #FFCD02 30%,#FEFCEA 100%);
background-image:url("../img/body_bg.jpg"), -o-linear-gradient(top, #FFCD02 30%,#FEFCEA 100%);
background-image:url("../img/body_bg.jpg"), -ms-linear-gradient(top, #FFCD02 30%,#FEFCEA 100%);
background-image:url("../img/body_bg.jpg"), linear-gradient(to bottom, #FFCD02 30%,#FEFCEA 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcd02', endColorstr='#fefcea',GradientType=0);

}

#bodyIE

{
background-repeat: no-repeat;
background-position: center top;
background-image:url("../img/body_bg.jpg");
height: 249px;
display:block;

}

Z lastnostjo z-index.

Hvala za odgovor vendar sem že poskušal rešiti z z-indexom a brez uspeha. Prikaže mi header sliko nad gradientom, vendar tudi vso vsebino strani pomakne navzdol.

Z-index v osnovi ne deluje globalno, ampak znotraj containerja, tako da če nista v istih containerjih, je včasih potrebno določiti tudi parentu z-index. Poleg tega je z-index odvisen od position: parametja. Na tvojem mestu bi najprej poiskusil position: relative.

Tudi position relative in z-index sem določil obema, rezultat pa je še kar enak.

Ali position: absolute, če ti vsebino dol pomakne in potem še definiranje odmika (left, top...).

obema daj znotrja containerja position: absolute; in sele nato z-index... drugace se ne overlapajo ampak je default flow...

Ne se sekirat za IE, ni vredno tvojga časa.

Rajš čas porabi za še boljšo izkušnjo na kompetentnih brskalnikih.

technolog:
Ne se sekirat za IE, ni vredno tvojga časa.

Rajš čas porabi za še boljšo izkušnjo na kompetentnih brskalnikih.

Res? Mogoce ves kater projekt je to in komu je namenjen? Si pomislil, da ima vecina sveta se vedno WinXP in so s tem obsojeni na IE8 max?

tomazin: daj se HTML

Ja te možnosti, da se ne bi sekiral za IE ni, saj kar 24% obiskovalcev strani uporablja IE.
Koda: koda

Ne vem ce pravilno razumem, ampak meni tezave resi, ce

<div id="bodyIE"></div>

prestavim tik pred zakljucni </div> od headerja.

Testirano v IE8, takole izgleda (logo je modre barve, container, kjer pride slika ima red background)