IE background-image CSS
 
tomazin 7. jul 2012 07:02:34 Pridružen od:
15. jun 2012
29 objav
18 1 1
#1

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;

}
všeč(0) ni všeč(0) spam(0)
 
pavarti 7. jul 2012 07:09:28 Pridružen od:
26. okt 2011
445 objav
587 92 14
#2

Z lastnostjo z-index.


všeč(0) ni všeč(0) spam(0)
 
tomazin 7. jul 2012 07:30:48 Pridružen od:
15. jun 2012
29 objav
18 1 1
#3

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.


všeč(0) ni všeč(0) spam(0)
 
pavarti 7. jul 2012 07:33:54 Pridružen od:
26. okt 2011
445 objav
587 92 14
#4

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.


všeč(0) ni všeč(0) spam(0)
 
tomazin 7. jul 2012 07:44:15 Pridružen od:
15. jun 2012
29 objav
18 1 1
#5

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


všeč(0) ni všeč(0) spam(0)
 
Daz 7. jul 2012 07:49:53 Pridružen od:
24. avg 2011
148 objav
147 5 1
#6

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


všeč(0) ni všeč(0) spam(0)
 
Mešetar 7. jul 2012 07:58:49 Pridružen od:
24. nov 2010
1543 objav
1945 962 114
#7

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


všeč(0) ni všeč(0) spam(0)
 
technolog 7. jul 2012 09:21:58 Pridružen od:
14. nov 2011
598 objav
768 300 22
#8

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



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


všeč(0) ni všeč(1) spam(0)
Z linuxom že 7 let. Pro web development.
 
perunpro 7. jul 2012 11:43:30 Pridružen od:
23. maj 2008
3360 objav
2892 217 19
#9

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


všeč(4) ni všeč(2) spam(0)
 
tomazin 7. jul 2012 12:42:20 Pridružen od:
15. jun 2012
29 objav
18 1 1
#10

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

Koda: koda


všeč(0) ni všeč(0) spam(0)
 
 

🔒 Za odgovor na to temo se moraš prijaviti.

Prijavi se