Flaming

# January 9, 2013 at 7:48 am

Hey!

I got a problem with my problem with my Css3 for IE.

I’m trying to make a gradient background to fill the whole screen, outside my container. It works fine firefox and chrome, but when i’m doing it in internet explorer it whole shows it in my container. The rest of my background is white… Could you please help me how to solve this? I would be very grateful!

My Css:

body{
width:980px;
margin:0 auto;
font-family:Arial,Helvetica,sans-serif;
background-color: linear-gradient(bottom, rgb(247,253,255) 0%, rgb(141,224,252) 71%);
background-color: -o-linear-gradient(bottom, rgb(247,253,255) 0%, rgb(141,224,252) 71%);
background-image: -moz-linear-gradient(bottom, rgb(247,253,255) 0%, rgb(141,224,252) 71%);
background-color: -webkit-linear-gradient(bottom, rgb(247,253,255) 0%, rgb(141,224,252) 71%);
background-color: -ms-linear-gradient(bottom, rgb(247,253,255) 0%, rgb(141,224,252) 71%);
/*Internet explorer*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#8DE0FC’, endColorstr=’#F7FDFF’);
background-repeat:no-repeat;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(247,253,255)),
color-stop(0.71, rgb(141,224,252))
)
}

#wrapper{
height:100%;
width:100%;
}
#header{
width:765px;
height:150px;
float:right;
padding-top:30px;

}

#logo{
height:160px;
width:150px;
float:left;
padding-top:10px;

}
#logo, a img {border:none;}

#content{
text-align:center;
float:left;
width:756px;
min-height:760px;
background-color:#FCE5F9;
margin-top:10px;}

jamygolden

# January 9, 2013 at 10:42 am

This reply has been reported for inappropriate content.

Could you also please provide the HTML? Or better yet, create a Pen!

Paulie_D

# January 9, 2013 at 10:45 am

Why are you restricting the body to 980px….shouldn’t you be using a div for that?

Plus why are using background-color and background-image that are the same, it seems unnecessary?

dfogge

# January 9, 2013 at 7:16 pm

this article made my life a little easier:
http://webdesign.tutsplus.com/tutorials/visuals/quick-tip-using-images-as-fullscreen-faux-gradient-backgrounds/

jaze

# January 10, 2013 at 2:37 am

simply add `html{ height:100%;}` in CSS file…