In this week’s web design video blog – do a quick tutorial on how to do optimised web page backgrounds with CSS. After the tutorial we talk about some of the upcoming CSS background features that will be available in CSS3. You can download the files used in the video below, and you can also find the links that are mentioned below:
- css-backgrounds-creare.zip
ZIP Format File
External Resources
- CSS Backgrounds Explained by W3 Schools – http://www.w3schools.com/css/css_background.asp
- CSS 3 – Multiple Backgrounds – http://www.css3.info/preview/multiple-backgrounds/
- Floral Background Image by Snap2Objects – Download Here
Video Script
James: Hi and welcome to our web design video blog, we’re Nick and James from Creare, today we are going to show you a tutorial on how to do CSS backgrounds focussing on how to have very low file sizes. After the tutorial we will talk about CSS 3 and some of the new background features on there.
James: So the first one we’re going to start with is just the very basic, plain background colour.
Nick: Secondly we’re going to look at how to tile a graphic.
James: Then we’re going to look at how to do gradients for backgrounds.
Nick: Fourthly we’re going to look at graphic positioning within the background itself.
Demonstration Beings:
- Standard colour CSS Backgrounds
- Tiled graphic CSS Backgrounds
- Gradient CSS Backgrounds
- Positioned Graphic CSS Backgrounds
Brilliant tutorial, very useful, Im now using the 3rd CSS background you showed (gradients) and it’s brilliant. Thanks very much for doing the tutorial!