Member Avatar for Octet

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

  • 4 Contributors
  • 3 Replies
  • 217 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by richardtj

Dani AI

Generated

As discovered, this is a browser-compatibility issue rather than a broken page. The CSS property you were using is part of CSS3 and older versions of Internet Explorer (IE8 and earlier) don’t implement it; IE9+ do. was right to flag that, and ’s wrapper idea is a reasonable fallback. Below are practical, non-invasive options that keep modern behavior while giving older IE something that works.

Use CSS for modern browsers (keeps aspect ratio, avoids distortion)

html,body { height:100%; margin:0; }
body {
  background-image: url('Background.jpg');
  background-position: center center;
  background-size: cover;    /* preserves aspect ratio and fills viewport */
  background-repeat: no-repeat;
}

If you need to support IE8/7, serve a simple HTML fallback (reliable)

<body>
  <img class="site-bg" src="Background.jpg" alt="">
  <div class="site-content">…</div>
</body>

<style>
html,body{height:100%;margin:0;}
.site-bg{
  position:fixed; top:0; left:0; z-index:-1;
  min-width:100%; min-height:100%; width:auto; height:auto;
}
.site-content{position:relative; z-index:1;}
</style>

This places a scalable <img> behind the content and works in older IE without hacks. For modern browsers you can add object-fit: cover on the image as progressive enhancement.

IE-only hack (use only if absolutely necessary)

<!--[if lt IE 9]>
<style>
  body { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Background.jpg', sizingMethod='scale'); }
</style>
<![endif]-->

The proprietary filter can scale a background but has quirks (PNG transparency, caching, path issues) — avoid it if possible.

Notes: use cover instead of forcing 100%×100% (which distorts images). Test which IE version you need to support and pick the least invasive fallback. This ties together ’s wrapper idea and ’s thoughts on repeating — choose tiling only if the image was designed to repeat.

Recommended Answers

All 3 Replies

Member Avatar for simplypixie

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.

Edited by simplypixie because: n/a
Member Avatar for sufyan2011

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.

Member Avatar for richardtj

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.