CSS3 Backgrounds of the Future
By Andi Smith - Monday, February 13 2012
Whilst we’ve been busy supporting older versions of Internet Explorer, a few new CSS features for backgrounds have sprung out of the woodwork and in to our browsers.
These features have been hiding behind their more popular gradient background color cousins; but are worth making a note of, especially if you’re creating sites for mobile phones and recent browsers; and the best news is that they are completely prefix-free!
Let’s take a look at what these properties are, what they do and afterwards we’ll have some fun with animating backgrounds. Yay!
To demonstrate how these features work, I’ve put together some demos. For each demo, unless otherwise stated the following CSS background properties are set:
background-image: red url(img/ice.jpg)
background-position: top left (default)
Please note, as these are live demos, you will need Firefox 4+, Internet Explorer 9+, Opera 10.5+, Safari 3+ or any Chrome to view them.
If you’ve been developing for mobile phones with high density pixels, you may have already come across
background-size. For a long time on the web we were unable to resize images when they were used as a background but with CSS3 property
background-size, not only are we able to specify the size of a background we are able to make it relative to the containing element.
Here’s the syntax and the possible options:
background-size: auto | cover | contain | value [value];
To show how each option works, let’s use some examples:
auto, contain and cover
You’ll already be familiar with
background-size: auto (the example on the
left). This is the default setting for background-size and what almost every background on the web so far uses. This setting doesn’t resize your image at all - if it’s too big it’ll cut off a chunk of the image. If it’s too small it’ll either leave a gap or repeat, depending on the value of your
background-size:contain (middle), the background image will be resized so that the entire image fits in the space whilst keeping its original proportions. This will mean that unless your container is to the same proportion as your background image there will be a gap. In our case it’s at the bottom and in red as the background-color has filled in the gap for us.
If you can’t guarantee the size of the background and you don’t want a gap,
background-size:cover may be exactly what your looking for (on the right).
This option will resize the image so that the shortest dimension (width or
height) exactly fits the space whilst keeping the images original proportion.
What this means is part of your image will be cut off. Depending on the
proportions of the image will depend on how much.
So to recap:
- Use contain and your background image height and width will be <= to the container.
- Use cover and your background image height and width will be >= to the container.
Now we’ve covered the three keywords, it’s time to take a look at the other
values that can be placed in to
background-size. All values can either be
specified as a single value or two separate values - one for the width and one
for the height.
In the case where only one percentage value is specified,
will use the value specified to resize the width regardless of whether the
width or height is the bigger dimension, which is why in our first example
(above left) there is a small gap at the bottom of the container.
Using percentage values allow us to specify what the percentage of the containing element the image appears in - NOT what percentage of the overall image dimensions we wish to show. In our middle example above the image is 50% of the total container. Again, the 50% is taken from the width value.
Even though the images are appearing at a smaller size, the image is still loaded from the server at its full size - resizing is occuring client-side, so the browser will still have to download the full size image.
We can use multiple values to specify different dimensions for the width and height. In the case of our example above on the right, we have specified a width of 100% and a height of 100%. This is not the same as cover mode - as we are specifying both dimensions the image will be resized disproportionally, which depending on the image and the values used may or may not be noticeable.
background-size: 50% 100%;
As you can see in our first example here the image has been disproportionally stretched when I’ve specified one dimension as half of the other. Much more noticeable!
In our second two examples, a percentage value larger than 100% is used. In
these examples, the image is shown as 150% bigger than the containing element
(again, not 150% of the image). The third example here also centers the image,
as it’s entirely possible to use all the other background css properties
background-size:50%; background-position:right bottom;
The first two examples here use
background-position to change the
positioning of the background image. Don’t forget you can use percentages and
other values for positioning images if you wish.
In our third example, we are repeating the image, which creates a tile effect even though it has been resized to 50% of the size of the original image.
Percentages are very useful, but sometimes you want to be explicit with the size of your background image. Let’s continue.
The most common length values are pixels (px), but you could use other valid length measurements if you wish. In the first example (left),
background-size is set to 80px auto; which means that the width will be set to exactly 80px and the height will be proportionate to that value. In this example, the auto value is actually superfluous - the default is already auto so it is not required. In our second example (middle), we have set the width to auto and the height to 200px which means the width will be set in proportion to the height. In our final
background-size example, we’ve stretched the image by specifying a width and height that isn’t suited for the image.
If you’re using multiple backgrounds, you can have multiple background sizes by separating the values with a comma.
background-size:32px 100%, 90% 150px;
These examples have different background sizes for each image - simply list the background sizes in the same order as your images. Remember that multiple images are stacked with the first listed image at the top and the last listed image at the bottom (top to bottom).
The third example (right) mixes percentages and lengths to create a cocktail of
Let’s move on to
background-clip, but if you’re interested you can read
more about background size on MDN.
background-clip allows us to specify what area of the container we wish to clip our backgrounds to. There are three options available: border-box,
padding-box and content-box.
background-clip: border-box | padding-box | content-box
(this is the default, you don’t need to specify it!)
border-box (left) is the default option, and this means the background will
sit under the border. This isn’t noticeable unless you have a transparent,
semi transparent or semi solid border (as we have here). As you can see in our
example on the left, the background sits under the border. If you’re wondering
why the background sits under the border on the bottom right, but not the top
left; it’s due to the
background-origin, which I’ll explain shortly.
padding-box (middle) clips the image so it no longer appears under the
border. The background image will start at the top left of the inside of the
containing element and finish at the bottom right of the containing element.
content-box (right) clips the image to the area where the content can sit.
That is - the background begins where the padding finishes. In the case of our
example, the padding is 5px wide all the way round so this creates a 5px
The final CSS3 background property I wanted to cover was
As you would have noticed from our example above, the background for the
border-box didn’t sit under the left and top borders. The reason for this is
because of the background-origin which determines where the background should
start - and it’s default value is padding-box.
background-origin: padding-box | border-box | content-box;
padding-box starts our background at the point where padding
border-box allows us to start our background where the border starts - at
the top left of the container element.
content-box starts our background where our content begins (after the
padding). If you look back to our example of
may notice that the image in our container starts 5px after it does in this
example. This is because background-origin determines where an image starts,
Now we’re done with learning the properties, let’s have some fun with background animations using CSS3 transitions and animations! There’s nothing really to learn in this section, I was just playing around. If you want to know more about CSS3 transitions and animations there are lots of useful resources already out there - Google is your friend!
Of the three CSS3 properties we’ve covered today, only
be animated. However,
background-position can also be
animated, as you’ll see below (providing your browser supports animation -
sorry Opera/IE9 users).
Hover to zoom!
Hover to move background!
Hover to move background!
The first example uses
background-size to increase the size of the image on
hover. The second (middle) example actually uses
background-position to create a film reel effect. The third example uses
background-size again to zoom in from a small image.
Hover to change color!
Hover to change size!
Hover to Mother Effing Rainbow!
In these examples, the first example (left) changes the background color from red to blue on hover; the second example uses both width and height background sizes to go from a lamppost to a letterbox effect; and the third example is a Mother Effing Rainbow effect in tribute to mothereffingtextshadow.com.
Enjoy the animations, and I hope this has been useful to you! Thanks for reading!
Andi Smith is a web developer from London, United Kingdom. He likes to build highly performant websites which innovate with genuine value.