I am attempting to make my first website, however I have hit a hurdle in what appears to be browser compatability issues (or I could be talking nonsense?).

I am wanting to stretch an image to act as my background of my website,the only issue is it won't work in Internet Explorer yet shall work in Google Chrome and the W3Schools 'Try it yourself' tool.

<style type="text/css"> 
body
{
background:url("Background.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
padding-top:40px;
}
</style>

I am using this in my Head and as I say, it works fine on other browsers but not in Internet Explorer. Is this just mine or is this an issue with all of them?
Is there anyway I can make this work for IE if it is a problem?

Thank you

Recommended Answers

All 3 Replies

Try setting the height of your body to the height of your background image and get rid of the background-size. Though for a set image background I personally would make a wrpper div to fit the body and put the css in their and leave the body to just have margin and padding set at 0.

If your backgroug is repeating, then take the 1 pixel image either horizentaly or vertically (depends on your image) and repeate it to X or Y axis accordangily. If not then give the background image height and width in pixel.

Background url(); width:whateverpx; height:whateverpx; background-repeat:norepeat;

The issue with the coding is that the part "background-size:100% 100%;" isn't recognised as correct code by ie. If you're going to stretch the image, you need to declare the size as I have above.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.