Can I implement a CSS-only fallback for background-size?
A CSS-only fallback for background-size
is tricky, but yes it can be done.
The trick is to use the short-form background
style to set the various background properties, rather than using the individual styles like background-size
, background-image
, etc.
So in your case, you would have something like this:
background: url(img2x.jpg) 0% 0%/100%;
(The 0% 0%
is for background-position
(0% 0% is default) which is required before the background-size
value when using the short-form style).
So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size
will throw away the whole line, rather than just throwing away the background-size
on its own.
This means that we can specify an entirely 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*/
You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size
setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.
Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.
So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size
.
Hope that helps.
[EDIT]
Browser compatibility may be a minor issue here. Some browsers may support background-size
but not support it as part of the background
short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size
.
This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.
In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.
In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.
Fallback background-image if default doesn't exist
You can use multiple backgrounds if there is no transparency involved and they occupy all available space or have the same size:
div{ background-image: url('http://placehold.it/1000x1000'), url('http://placehold.it/500x500'); background-repeat:no-repeat; background-size: 100%; height:200px; width:200px;}
<div></div>
CSS - Extra background image for when the first image doesn't load?
Simple answer:
You could either nest the span inside another span - with the outer span set to use the backup background image. If the inside span's background isn't available, then you'll see the outside one's
Better, more difficult answer:
You could achieve a similar result in pure CSS, by adding some psuedo content before the span, and then styling that to have the fallback background. However, this usually takes some trial and error to get it right;
Something lile
span.image:before{content:" "; background:url(backup.png); display: block; position:absolute;}
Related Topics
Add CSS to Head from Template File in Magento
Angular 6 - How to Apply External CSS Stylesheet (Leaflet) at Component Level
Jagged Font on Windows - Chrome & Safari
Chrome Not Loading CSS Source Maps
Unwanted CSS Injected into Posts
Configuring Compass on Windows
CSS3 /CSS - Spinning Background Image
CSS - Floating Two Elements Side by Side
How to Add CSS to Vaadin/Maven Project
Apply a Different CSS Width Property Based on Browser? (Ie8, Ff)
Vscode - Change Highlight Color of Current File
CSS: Two Divs - One Fills Space, One Shrink-To-Fit
Text Size for Drop Down Menu/Input Select Not Working in Safari
Scss Function for Animation Keyframes
Looking to Use Pseudo Elements to Create a Triangle