background-size

[edgarzakaryan]

Hi everyone.
I have trouble in using background-size for IE.

I have image which height is 500px, and I'm using background-size to enlarge the height to 700px.
It's working perfect in all browsers, but not in IE.
I don't know how may I fix this. Maybe I need to include some .js libraries to fix this? but which one, I have tried something, but it didn't help.

[markbrown4]

Hi,

Firstly, don't upscale images with CSS, they'll be blurry.

You'll need to use something like Modernizr which will add a class of 'backgroundsize' to the html element. You can use this to fork your code to support ie.

.element {
  background-size: 700px auto;
}
.no-backgroundsize .element {
  /* other rules */
}

[edgarzakaryan]

Hi,

Firstly, don't upscale images with CSS, they'll be blurry.

You'll need to use something like Modernizr which will add a class of 'backgroundsize' to the html element. You can use this to fork your code to support ie.

.element {
  background-size: 700px auto;
}
.no-backgroundsize .element {
  /* other rules */
}

My script is like this now.

<style>
.background{
            background-image:url('background.jpg'),
            width: 900px;
            height: 700px;
	    background-size: auto 700px
}
</style>

<div class="background"></div>

but because of real image height is 500px, IE don't enlarge it to 700px

[markbrown4]

Why not just make the image 700px?
Without background-size there's no way to scale a background image.

[edgarzakaryan]

The thing is that the height of images can be different, so it can be 500px; 600px, etc. and I need to change the size.

[ralph.m]

The background-size property has some other options, like "contain" and "cover" that may be of some use: http://www.css3.info/preview/background-size/

But this doesn't work on older browsers unless you use some JavaScript, though.