Responsive Background Image

Posted By Fabio

One of the first things you will discover when you start working with responsive designs is that you need images that can adjust to the screen size as well. While this task does not cause particular problems when an image is a foreground element part of another element such a div or the whole html elements, a headache can hit you when you try to make responsive an image which represents the background of a div or of the whole page. This is due to the fact that a background image and its container often have different sizes, proportions and aspect ratio and therefore they scale in a different way and no matter what you do, you will always end up having a background image which either does not fit to its container or it does, but with the wrong aspect ratio (which equals to distorted images).

The solution is the CSS property background-size and its cover attribute. The cover keyword tells the browser to scale the image in a way that it fits to the window at every border while keeping the original proportions and aspect ratio. Here is an example:

While i have already explained how the cover attribute works, it is also important to say a word or two about the following line and its attributes:

The no-repeat attribute tells the browser that we want only one session of the background image fitting to the container and it is the equivalent of:

The center center attributes tell the browser that we want the background image being centered both in width and height in its container and it is the equivalent of:

And finally, the fixed attribute tells the browser that we want the background image to be attached to its container with a fix positioning so that it follows the container scaling accordingly; this is the equivalent of:

You can see a Fiddle demo here and you can learn more about background-size here.