Can I implement CSS-only backup for background?

Question

This works well for browsers that support background-size . Otherwise, the 2x image will be enlarged.

 .a { background-image: url(img2x.jpg); /* 1000x1000 */ background-size: 100%; height: 500px; width: 500px; } 

This should be used for browsers without background-size support.

 .a { background-image: url(img1x.jpg); /* 500x500 */ height: 500px; width: 500px; } 

Is it possible to trick the browser if background-size not supported? I know that I can use @supports , but it is much less supported than background-size , so in this case it is completely pointless. I also do not want to use JavaScript.

In principle, so, besides work!

 .a { background-image: url(img1x.jpg); /* 500x500 */ height: 500px; width: 500px; /* stop parsing this rule when background-size is not supported */ /* otherwise continue parsing and set different background-image */ background-size: 100%; background-image: url(img2x.jpg); /* 1000x1000 */ } 

This does not work explicitly, but is there a trick that could make it work? Thanks.

Answer 1

The CSS background-size only exception for background-size difficult, but yes, it can be done.

The trick is to use the short form background style to set various background properties, and not to use individual styles like background-size , background-image , etc.

So, in your case, you will have something like this:

 background: url(img2x.jpg) 0% 0%/100%; 

( 0% 0% for background-position (0% 0% by default), which is required before the background-size when using the short form style).

So far, all I have done is compressing your existing code into one short CSS line, but the smart bit is that now we have done it, a browser that does not recognize background-size will throw to separate the entire line, not just drop the background-size yourself.

This means that we can specify a completely different set of background values ​​for older browsers.

 background: url(ie8bg.jpg); /* Shown by IE8 and other old browsers */ background: url(img2x.jpg) 0% 0%/100%; /* shown by new browsers with background-size support*/ 

Here you can see a demonstration of this here . Modern browsers will get one background image stretched to 100% background-size , while older browsers (like IE8) will get a completely different image without stretching.

Since you can define a completely separate background for older browsers, you can even do things like a solid background color for IE8 rather than an image, while preserving the image for other browsers.

So yes, a fully CSS solution that gives you a reserve for browsers that do not support background-size .

Hope this helps.

[EDIT]
Browser compatibility can be a minor issue. Some browsers may support background-size but not support it as part of the short background syntax. For the most part, this only applies to older browsers (e.g. Firefox 7), but this is still a problem in current versions of Safari. This means that with this technology Safari will see the background, although it actually supports background-size .

This is obviously not ideal, but this is mitigated by the fact that it will at least get a reverse image, which means that the page should look at least as good, if not as good, as in other browsers. We hope that this problem in Safari will be fixed in a future version.

At the same time, this fact does not detract from the fact that this answer is a valid solution to the question - it really provides a fallback in pure CSS.

In light of this question, I wrote a blog post on this subject , which I hope will describe it in more detail and provide other options if this CSS rollback solution is not enough.

Answer 2

You already mentioned @supports . You can define imgx1.jpg by default, and if background-size supported, you will set it to img2x.jpg

For browsers such as Chrome, you can parse your CSS file using PHP and decide according to the User-Agent if the browser supports it or not.

You get a User-Agent in PHP with $_SERVER['HTTP_USER_AGENT']

Answer 3

I might not quite understand what the problem is: lack of support for the background-size property, but here is my thinking:

If you want to use a background image with a double size, perhaps this is for high density displays (retina). If so, I would try to define my basic style with a single background image and background size that would be ignored by older versions of IE. However, browsers processing a pixel density request will attempt to display a double-density background image.

 .a { background-image: url(img1x.jpg); /* 500x500 */ background-size: 500px 500px; height: 500px; width: 500px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .a { background-image: url(img2x.jpg); /* 1000x1000 */ } } 

Hope this makes sense and what you were looking for.

Here are some more good ideas regarding CSS / JS grid background size: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/