CODEWITHSUNDEEP
javascripthtmlcssinternet-explorer-8drupal-7
kaidash
kaidash

Reputation: 33

Scale background image to fit ie8 window

I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.

background-image: url('image.jpg');
background-size: cover;

I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.

A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).

Upvotes: 0

Views: 4390

Answers (2)

Talkingrock
Talkingrock

Reputation: 789

Add Full Size Background Image to Internet Explorer 8, and IE7

Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.

Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).

HTML Code

<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->

CSS

.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}

You probably already know this, but here are 3 ways to target older versions of IE:

  1. JavaScript browser feature detection - mattstow.com/layout-engine.html
  2. Css Hacks - BrowserHacks.com
  3. IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.

position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 3

manish nautiyal
manish nautiyal

Reputation: 2584

This works for me to stretch image on full window in IE8

http://css-tricks.com/perfect-full-page-background-image/

Upvotes: -1

Related Questions