November 17

posted Nov 17, 2011, 1:20 PM by Peter Knowles   [ updated Nov 17, 2011, 1:23 PM ]
If you haven't completed and shared your assignment from yesterday (Your top 5 or 10 Web Design rules) do that first.

Once you've shared that, you'll turn your attention to one of the features that came up in many of the best designs you chose: Background images

Begin by following the information and tutorials at w3schools' CSS background page.  
The main page takes you through some of the things you may already know, but then you'll also want to take a look at the examples on their advanced example page, and how to create a background that doesn't move.  

Make sure you read and understand this notice on the first page:

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Once you've got a sense of how background images work, it's time to try it with one of your own pages.

Go back through your files and find the lists and links page you created back in October. It's a pretty long page of HTML that you can now use to style with CSS. 

Open your Lists and Links HTML file, and use CSS (and the instructions above) to add some background features. You've probably already tried adding a background color. Now try to add a background image,  either as a full page background (one that doesn't move, or, one that does), or as a background that the text wraps around (as in the advanced example). 

Here's a link where you can find appropriate background images (that don't need to be reformatted to work as a background)

Remember: Unless you create code to do otherwise, a background image will repeat across and down your web page as many times as necessary to fill the space available. This can have unintended consequences when people with larger screens look at  your page. 


Comments