News

Take control of your backgrounds with CSS3

CSS3 offers designers more flexibility with background images. Here we take a look at some of the key properties

Take control of your backgrounds with CSS3

CSS3 offers designers more flexibility with background images. Here we take a look at some of the key properties.

Background images have played a key role in web design for as long as CSS has been popular, and support has been available. They are the aesthetic that creates the persona of a page. The big issue with background images is their lack of flexibility. They can repeat – perfect for textures, and they can be fixed to stay in place on screen but they cannot be resized. This means that developers who want a beautiful full-screen canvas, or simply more flexibility, have to improvise with absolute positioned tags, image sizes or code.

The background-size property, part of the CSS3 Backgrounds and Borders module, grants designers far more scope to be creative and with cleaner code. And, with support for multiple backgrounds by its side, this tasty duo is set to finally give web designers a chance to make the most of their backdrops.

This article was originally featured in Web Designer issue 190, authored by Steve Jenkins. There are no project files required for this tutorial.

01 Default value

The default value for the background-size property is auto. This displays the background image at its original size, eg 1,000 x 700px. The background-size property works in tandem with the background property so if the image is set to no-repeat only one instance will appear; on the other hand, if set to repeat it will do just that.

02 Specific size

An alternative to the auto option is a specific set of dimensions, eg 500 x 350px. The first value refers to the width of the image while the second refers to the height. Again, the repeat property helps to determine how the background appears.

03 Auto values

Background-size allows for the combination of specific sizes and the auto option. If the first value (width) is set to 500px and the second value to auto, the height will be automatically reduced proportionately to the width. This keeps the image’s original aspect ratio. If only the first value is added it is assumed that the second is auto.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: 500px auto;
004 }

04 Auto width

Adding the auto value first changes the perspective of an image. The first value (width) will now be determined by the second value (the height). The height will become the static value and the height will be automatically reduced/increased proportionately to the width, again keeping the aspect ratio.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px; 
004 }

05 Percentages

To add more flexibility to the size of a background image the values can be added as percentages. Adding a percentage as the first value, eg 50%, determines that the width will be 50% of the screen or 50% of the containing div tag. The second value (height) will be set to auto and its size will be kept in proportion.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px;}

06 Go full screen

Setting the first value to 100% will make the background image extend to the full width of the containing div tag or screen. If applied to the body tag the background image will go full screen. The height of the background image will be determined by the image aspect ratio/proportions. This means that the image will not always extend to the bottom of the screen

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: 100% auto;}

07 Defined height and width

Setting the first value (width) to auto and the second value (height) to 100% will not produce straightforward results. If applied to the body tag the image simply shrinks to a minimal height. To work effectively the background needs to be inside a div tag with a defined width and height.

001 #topsection {
002 width: 1900px;
003 height: 1500px;
004 background: url(images/backblur1000.jpg)   no-repeat;
005 background-size: auto 100%;     
006 }

08 Combinations

The background-size property allows for the combination of fixed sizes and percentages. Setting the width to 100% and the height to a fixed size of 1,100px will ensure that the background image goes full width and stays at the selected height. This can work well for full-screen backgrounds, but to fully benefit the image needs to be fixed.

001 body {
002 background: url(images/backblur1000.jpg)   no-repeat fixed;
003 background-size: 100% 1100px;}    

09 Images and colours

A technique that’s used to ensure that a background image works with all resolutions is to blend the background image with a background colour; this is easy to implement with background-size. Our example goes full width so only the bottom of the image, which is a single colour, needs to match the background colour.

10 Contain it

There are two additional values for the background-size property: contain and cover. The contain value scales the background image while retaining the image’s original proportions. It will ensure that the image is as large as possible, but it may not cover all the background, similar to step 6.

001 body{
002 margin: 0;
003 background: url(images/backblur1000.jpg)   no-repeat;
004 background-size: contain;
005 }

11 Cover it

The cover value works in a similar way to contain but instead of being contained in the accompanying tag the image expands to fill the tag. The value uses the smaller dimension and expands to fill the tag/window. This does mean that part of the backgro
und image may not be displayed. Another point to note is that the image doesn’t scale with the browser window.

001 body{
002 margin: 0;
003 background: url(images/backblur1000.jpg)   no-repeat;
004 background-size: cover;
005 }

12 Full-screen fix

The cover value is the ideal choice for designers/developers who want to go full screen with the use of a single line of code. However, the background image still moves vertically, which can cause issues with content, so it’s a good idea to set the background position to fixed to keep the full-screen effect.

001 body{
002 margin: 0;
003 background: url(images/backblur1000.jpg)   no-repeat fixed;
004 background-size: cover;
005 }

13 Multiple backgrounds

The background-size command also works in conjunction with several other background properties allowing for multiple backgrounds with a few additions to the code. To add multiple images the first step is to add the locations. The first location is the image that will sit at the top of the pile, so make sure the background image is added last.

001 body{
002 background: url(images/star.png), url(images/backblur1000.jpg) fixed;
003 }

14 Repeat and position

To ensure the images do not repeat the background-repeat property is set to no-repeat. The next step is to position the images that have been added. This is done using the background-position property. The first value is the horizontal axis while the second is the vertical axis.

001 body{
002 margin: 0;
003 background: url(images/star.png), url(images/backblur1000.jpg) fixed;
004 background-position: 400px 50px, 0px 0px;
005 background-repeat: no-repeat;
006 

15 Size it up

Finally, the size of each image is determined by the background-size property. This can contain a value, eg 200px, or a keyword such as auto or cover. Again, the added values need to be placed in the correct order to ensure that the backgrounds display as intended. If a single value, eg 100px, is added, it is assumed that the other value is the same.

001 body{
002 margin: 0;
003 background: url(images/star.png), url(images/backblur1000.jpg) fixed;
004 background-position: 400px 50px, 0px 0px;
005 background-repeat: no-repeat;
006 background-size: 100px, cover; 
007 }

Playing the percentages

Before support for background-size, background images were restricted to the dimensions assigned to them when the image was originally created. There was no way to adjust the size of a background image; the best a designer could do was repeat an image, fix in place or blend with a background colour. The workaround was to use absolute positioned tags, image percentages and/or jQuery.

The introduction of background-size, however, offers developers a whole lot more flexibility and an improved workflow. Background images – especially those attached to the body tag – can now be implemented as desired with a few simple commands. However, percentage values within the background-size property only work when the width and height have been declared with fixed dimensions, eg 1,900 x 1,200px.

If the width of a div tag is defined in percentage form then background-size percentages will not work as intended. This varies slightly within the body tag with percentage values being accepted for the width, even though no width has been defined.

01 Use position name

Backgrounds can be positioned using the predefined names, ie centre, top, left, right. These are okay for quick positioning but do not offer pinpoint location of an image.

001 body{
002 background: url(images/star.png), url(images/backblur1000.jpg) fixed;
003 background-position: center top, bottom left;
004 background-repeat: no-repeat;
005 }

02 Precise positioning

To position multiple backgrounds more accurately specific values can be entered instead of names. These must be entered in the correct order to work as intended.

001 body{
002 background: url(images/star.png), url(images/backblur1000.jpg) fixed;
003 background-position: 500px 10px, 800px 50px;
004 background-repeat: no-repeat;
005 }

03 Shorthand

Written code is typically defined in the standard format with a host of properties on display. To reduce page weight and produce more efficient code CSS shorthand can be employed.

001 body{
002 background: url(images/star.png) 500px 10px no-repeat, url(images/backblur1000.jpg) 800px 50px no-repeat fixed;
003 }
×