The background colour and images are the basics of any website build. The first section of this article, for CSS2.1, covers the more rudimentary aspects, while the second part covers CSS3 and in particular properties for multiple images for backgrounds, background-origin, background-clip and background-size.
CSS 2.1 colour and background properties
Level 2.1 CSS colour and background is the nuts and bolts of any website build. If you aren't familiar with any of these then practice and practice until you are and then move on to CSS3 later.
color
For newcomers this can an early stumbling block because although color can refer to any foreground colour of an element it is always used for the color of text only.
An example being:
p {
color: #008000;
}
The above would change the text in the paragraph (stipulated by the p selector) to green.
There are several different ways of specifying colour in CSS and they are HEX, RGB, RGBA, HSA, HSLA and set CSS color names.
This post does not concern itself with the different web colour values but the official W3C guide to colour units is here: http://www.w3.org/TR/css3-iccprof#colorunits. As with all W3C documents it is a dull read – if you know of a worthy article on this subject then post a link in the comments section.
Those not familiar with colour on the web should familiarise themselves with HEX and RGB (the same values but two different formats) first and then pay closer attention to the remainders listed above later.
Newbies please also note the American English spelling of color (compared to British standardised colour). It has to be spelled color in your stylesheet.
background-color
Following on from changing the colour of text here is how you change the colour of the background. An example being:
#example {
background-color : #000000;
}
This would change the background of the HTML element on the page labelled with the id of example to black. The notation is a HEX value.
background-image
Images are placed into a stylesheet by using the URL path, for instance:
#example {
background-image : url(images/background-portrait.jpeg);
}
This places the JPEG called “background-potrait” into the example id.
The path can be absolute or relative. To explain, this is an absolute path: http://www.suburban-glory.com/images/main-icon.png, while this is a relative path: /images/main-icon.png/. It means relative to the page you are currently on.
background-position
Once you have specified an image to be used for a background then you may need to position it. This is done on the X and Y coordinates.
#example {
background-image : url(images/background-portrait.jpeg);
background-position : right bottom;
}
This places the image in the bottom right-hand corner. A background position of “left top” would place the image in the top left-hand corner.
The total list of usable keywords are:
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
These should be self-explanatory.
The values can also be specified as pixels or percentages:
#example {
background-image : url(images/background-portrait.jpeg);
background-position : 40px 50px;
}
The above places the image 40px from the left and 50px from the top.
background-repeat
Unless you specify otherwise any background image is automatically repeated both along its X and Y coordinates until the element is filled.
You can take control of that by using the background-repeat property:
#example {
background-image : url(images/background-portrait.jpeg);
background-position : right bottom;
background-repeat : no-repeat;
}
Using the same declaration block as previous we have now made sure that the image appears only once.
Simple, yes? Changing the value of “no-repeat” to “repeat-x” or “repeat-y” means that the image can be repeated along either the x or y axis respectively.
background-attachment
Out of all of the above this is probably the least used but can provide an impressively stylistic touch. All background images scroll with the content, but be declaring a fixed background attachment the image remains static no matter the scrolling.
body ( background-image : url(images/background-portrait.jpeg); background-repeat : no-repeat; background-attachment:fixed; }
The above will fix an image to the body of an html page. Note that background-attachment does not work in Internet Explorer 6.
As a live example see this website I created here – the fixed background is on #wrapper.
It is worth noting that all of the above five properties can be shortened onto one line; however, this isn't an article about CSS shorthand and for that I would recommend Dustin Diaz's feature CSS Shorthand Guide or Shane Jeffers item CSS Shorthand – A Guide to Cleaner and Faster Coding.
CSS3 colour and background properties
These are now regarded as advanced features of CSS, but very soon – when all the browsers catch up with CSS3 specifications – they will be regarded as basic to a designer as 2.1 is now.
background (multiple images)
With CSS2.1 it is only possible to add one background image for every element, but with CSS3 it is now possible to add as many images as you desire.
The only way this could be done before was to add extra HTML markup but now it is possible to do this as so:
#example {
background : url(images/picture-one.jpg), url(images/picture-two.jpg), url(images/picture-three.jpg);
}
Just list the images and separate them with a comma.
I cannot begin to tell you just what a bonus this is when it comes to web design. It really does open up new aesthetic doors to explore.
The bad news? It doesn't work in the legacy browsers, namely Internet Exploer 6, 7 and 8. The good news? Use CSS3 Pie for a solution to this problem. I bless thee CSS3 Pie developer, Jason Johnston.
background-size
This, as the name suggests, changes the background image size; and, like much of CSS3, lacks IE support (apart from version 9).
However, this CSS3 property has been receiving a lot of attention and is being widely adopted despite of the usual IE issues.
Although Webkit (Safari and Chrome) have supported this property for sometime; Firefox 3.6, launched in January 2010, added it to their browser through the usual Mozilla prefix.
There are two basic values that can be used: cover and contain.
They are written like so:
#example {
background : url(images/picture-one.jpg);
-moz-background-size : cover;
background-size : cover;
}
(-moz-background-size is required for versions of Firefox less than 4).
This stretches the image to cover the entire container, in this case the example id.
To stretch the image but keep it's proportions then use contain instead:
#example {
background : url(images/picture-one.jpg);
-moz-background-size : contain;
background-size : contain;
}
But the fun doesn't stop there. It is also possible to specify percentages and pixels.
This would change the dimensions of the image to 75% of the size of the container (not shrinking to 75% of the original size!)
#example {
background : url(images/picture-one.jpg);
-moz-background-size : 75%;
background-size : 75%;
}
It is also possible to use pixels:
#example {
background : url(images/picture-one.jpg);
-moz-background-size : 75px;
background-size : 75px;
}
The above changes the size of image to 75px square.
This property also allows the coder to change the proportions on its X and Y axis, so “background-size: 75px 100px” would create a rectangle shape.
An example of background-size in action is this website here.
If you look at the central wrapper area (in non-IE browsers) then that is actually a 12 pixel square cut from the image in the left hand corner. I gave it a slight opacity and then used the background-size cover value to stretch it across the entire div.
For further reading take a look at A List Apart's seminal article Supersize that Background, Please!
background-origin / background-clip
I've grouped these two properties together as the same keyword values are used for them both.
To recap, we have learned how to add an image, position it, repeat it (or not) and even stretch it in various way. Background-origin / background-clip is concerned with how the background image relates to the padding and border of the container it is within.
As way of a visual representation I'm going to nick the diagram from the CSS3.info page:
Compared to background-size, these are only capable of relatively minor design changes.
If you wish to check cross-browser issues with CSS backgrounds then take a look at the table on Quirksmode.