CSS3 Background-Image

While creating a prototype for a project (using Bootstrap), I added the Jumbotron component which is described as: “a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site” and found that my background image wasn’t responsive at all.

After searching on Stack Overflow, I found that using “background-size: cover” to the Jumbotron class works to make the background image responsive. For example, see below:

.jumbotron{
    background: #efefef url(image.png) no-repeat center center fixed;
        -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

So here’s a more in depth look at using “Responsive Full Background Image Using CSS” by Jacob Gube.

“The CSS background-size property can have the value of cover. The cover value tells the browser to automatically and proportionally scale the background image’s width and height so that they are always equal to, or greater than, the viewport’s width/height.” – Jacob Gube

Jacob continues to say that “to enhance the page load speed on small screens, we’ll use a media query to serve a scaled-down version of the background image file.” He further states the reason to use media queries is that “it’s a huge payload just for a background photo” which is never a good thing and that “it’s exceptionally bad on mobile internet connections”. Adding that “the image dimension is excessive on small-screen devices”.

Jacob wraps up his tutorial by stating, “if I can say just one cautionary thing about this technique, it’s this: Please use it with care because large files can severely affect UX, especially when our user is not on a fast or reliable Internet connection. This is also the reason why you should set a good default background color so the user can read the content while the background image is loading.”

So this is all well and good for the majority of browsers, except for IE8. If you look at Can I Use you will see that IE8 doesn’t support this CSS3 feature.

To overcome this issue, I found an article on “How to Enable Background Size in Internet Explorer” by Thoriq Firdaus.

Thoriq demonstrates how the CSS3 Background Size property can be used in Internet Explorer. He states that “unfortunately, this feature does not fallback nicely in Internet Explorer 8 and below. If you attach a very large image, it may overflow the container.”

So Thoriq mentions to use the Background Size Polyfill developed by Louis-Rémi. This polyfill “replicates the same behaviour of background-size property with cover and contain values. This polyfill comes in the form of an HTC file named backgroundsize.htc, and an .htaccess file, which is required when the page is served from Apache server to send the .htc mime-type.”

He goes on to provide the following instructions, “to use it, include the HTC file through the Internet Explorer behavior property, as follows.”

.background-size {  
        width: 500px;  
        height: 320px;  
        background-image: url('img/image.jpg');  
        background-size: cover;  
        -ms-behavior: url('http://example.com/js/backgroundsize.htc');  
    }

I’ve noticed in the code example above, that it’s probably not a good idea to give your class and CSS selector the same name eg. background-size.

He goes on further to instruct “…if you are using Apache server, place the .htaccess in the root folder of server or, simply add this line to the existing .htacces file, if available.”

AddType text/x-component .htc  

References: