CODEWITHSUNDEEP
cssinternet-explorer-8
Uberswe
Uberswe

Reputation: 1058

Fixing Background-size 100% for IE8?

I have the following css to get a background image to stretch 100% inside a section.

.sectionclass {
  background: url('../img/bg.png') 50% 0 no-repeat fixed;
  background-size:100%;
  width: 100%;
  position: relative;
  line-height: 2;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg.png', sizingMethod='scale');
}

It works well in the latest version of IE but when I look at IE7 or IE8 the background will not go full width. What would be the easiest way to solve this problem?

Upvotes: 3

Views: 9806

Answers (2)

Atif Azad
Atif Azad

Reputation: 737

.yourclass {
    background:url(image-path) repeat fixed 100% 100%;
    background-attachment:fixed;
    background-size:100%;
    background:url(image-path) repeat fixed center center\9;

   /*IE 9*/
    background:url(image-path) repeat fixed top 100%; /* IE9 */
    background-attachment:fixed; /* IE9 */
    background-size:100%; /* IE9 */
}

Upvotes: 1

BoltClock
BoltClock

Reputation: 723498

Unlike all other url() paths in CSS which are relative to the directory where your stylesheet is located, the src path is relative to the page where the stylesheet is used.

For example, if your page is located in the root directory, and your stylesheet is located in its own directory next to the img directory (hence the need for ..), you need to change src to make it relative to the root directory, like so:

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg.png', sizingMethod='scale')

Upvotes: 8

Related Questions