background-size in different browsers

Question

I have some difficulties showing a scaled background on different browsers. I created the website on a Google chrome browser, but when loading the site on a iPhone or earlier version of IE, the background doesn't scale, or just doesn't show at all.

I simply used the css code:

background-size: 100% 150%;

Then I changed it to:

background-size: auto;

But this still gives some troubles. Any idea how I could resize/scale this image on every browser and IE from version 6 to now?

EDIT

With the code below, everything works on Chrome, FF and latest IE, But on IE8(and below I think) it show the unstretched picture. On iPhone it simply doesn't show anything at all. :/

#head-div
{
    padding-bottom: 15%;
    width: 100%;
     background: url(../img/banner.gif) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale');
}

possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) — cfs, Aug 08 '13 at 20:34
It should work on an iPhone. `background-size` is supported in Safari. Not, though, in IE8. ([Details](http://caniuse.com/background-img-opts)) — Šime Vidas, Aug 08 '13 at 20:37

samrap · Accepted Answer · 2013-08-09T20:26:56.220

2

body {
  background: url(image.jpg) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',     sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
}

These are the requirements for cross browser. There's like 5 of these exact questions already on stack overflow with answers exactly like mine so there was no need to ask this question

edited Aug 09 '13 at 20:26

answered Aug 08 '13 at 20:40

samrap

5,595
5
31
56

you missed the leading dash on the prefixes. – Spudley Aug 08 '13 at 21:26
1

no worries :-) easy mistake to make. +1 for a good answer. Although I think CSS3Pie is better than using `filter`, due to all the bugs and limitations of IE's filter styles. – Spudley Aug 08 '13 at 21:36
Oh the joys of Microsoft :-) – samrap Aug 09 '13 at 00:28
1

hehe. well, the joys of old IE versions, for sure. Newer versions are perfectly good browsers, but when people still want to support IE6, you're always going to have some issues to deal with. – Spudley Aug 09 '13 at 06:38
Hello, thanks for the answer, got some more problems, made an edit above. thanks – Nick Peelman Aug 09 '13 at 11:57
Made in edit to my answer, the filter prefix should do the job @NickPeelman – samrap Aug 09 '13 at 20:27
I almost gave up on the iPhone background. But after many hours of google'ing, I found out that iPhone/iPod/iPad can't use all image sizes. It kinda depends on the megapixels or has a maximum size. I used a media quary to change the background for apple devices to a lower resolution, and now it shows the background. In combination with your given code, this background is now visible on every device, and scaled ! thanks for your time :) – Nick Peelman Aug 10 '13 at 15:12
Yea no problem. Thanks for posting this comment I didn't know about the background-size thing. Good to know for the future! – samrap Aug 10 '13 at 18:51

score 1 · Answer 2 · answered Aug 08 '13 at 21:25

I suggest using the CSS3Pie polyfill script.

This script seamlessly adds support for various CSS features to old IE versions, including background-size.

It works in IE6 and up, and requires only a tiny bit of extra code in your CSS file to activate it, which other browsers will ignore entirely.

background-size in different browsers

2 Answers2

Linked