Can't stretch 100% div background image in css for IE8

Question

I have a background image for top section of a website that will not stretch all the way across for Internet Explorer 8. have looked into many solutions but not one worked for me. Thanks in advance.

  <div id="header_combined">
  <img  align="left"  src="/1.images/others/logo/logo4.gif" alt="my logo"  />
  My site

  <strong>  Ltd.</strong>
  <p>"Some more text here"</p>
  </div>

CSS

 #header_combined {

 background-size: 100%;
 Width:100%;
 float:left;
 font-size: 300%; font-weight:bold; font-style:italic;color: #E1012F; text-align:left ;
    font-family:Georgia, "Times New Roman", Times, serif; vertical-align:middle;
    text-shadow: white 0.1em 0.1em 0.2em
 padding-left:15em;
 background-repeat:no-repeat;
 background-image:url('/1.images/others/logo/combined logo2.jpg');

 }
 #header_combined strong {
 color: black;
 text-shadow: white 0.1em 0.1em 0.2em;
    }
 #header_combined p {
 color: red;
 font-size: 0.3em;
 font-style:italic;
    }

Check this link:http://stackoverflow.com/questions/14705025/background-size-100-not-working-in-ie8-and-ie7 — Joke_Sense10, Oct 29 '13 at 11:00
possible duplicate of [How do I make background-size work in IE?](http://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie) — user, Mar 08 '14 at 03:15

score 2 · Answer 1 · edited May 23 '17 at 10:10

That's because background-size is a CSS3 property which isn't supported before IE9.

However, there is a thread which suggests a possible workaround: How do I make background-size work in IE?

You try top set alpha filter property:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

There is a nice discussion on this problem

score 0 · Answer 2 · answered Oct 29 '13 at 11:04

0

What logo image you want to stretch?

Try

.img {
    width: 100%;
}

answered Oct 29 '13 at 11:04

fedrbodr

416
4
13

The image I want to extend across the screen is called "combined logo2.jpg" it is about 800x100 px. Won't the above extend every image in my website by 100%? – jackam Oct 29 '13 at 11:07
Not every image. note the "." in front of the name. It indicates a class, so every element with the class "img" :) However the OP didn't use a class img. – nkmol Oct 29 '13 at 11:13
It only fixed my image stretch problem. But now all my page is pushed up, because of position:fixed and have trouble positioning logo and text on the background image. – jackam Oct 29 '13 at 16:01

score 0 · Answer 3 · answered Oct 29 '13 at 11:04

0

What about:

#header_combined img { width:100%; }

answered Oct 29 '13 at 11:04

Joe Ratzer

18,176
3
37
51

That stretches the logo, not the background image. – jackam Oct 29 '13 at 11:29

score 0 · Answer 4 · answered Oct 29 '13 at 11:09

0

css:

    .bg {
    background-position: left center;
    height: 102%;
    position: fixed;
    width: 100%;
}

html:

<img class="bg" src="artist-bg4.jpg" alt="">

add html code below <body> tag

answered Oct 29 '13 at 11:09

Gajjar Rakesh

26
2

I have two images. One logo and one strip that I would like to stretch 100%. then i would like the logo and writing to sit on top of the stretched strip. – jackam Oct 29 '13 at 11:21
above code helps you to set bg and then you can place logo and writing on it. for Strip you can use property: background-repeat: { repeat | repeat-x | repeat-y | no-repeat | inherit } ; – Gajjar Rakesh Oct 29 '13 at 12:57
The background image is a horizontal strip, therefore don't need it to be height:102%. – jackam Oct 29 '13 at 13:22
That worked a treat. thanks. had to remove position :fixed and adjust the height of the strip. – jackam Oct 29 '13 at 14:18
It only fixed my image stretch problem. But now all my page is pushed up, because of position:fixed and have trouble positioning logo and text on the background image. – jackam Oct 29 '13 at 16:02

Can't stretch 100% div background image in css for IE8

4 Answers4