CSS Backgrounds

Create a new Web page from _template.html.  Save it as backgrounds.html.  Delete the link element.  You should have a style element inside your head element.  If not create one.  You should have a body rule inside the style element.  If not create one (complete with braces).  Add this rule inside the braces:

background-color:rgb(0,150,0);

Put Backgrounds as the h1 and title content.  Now add a new paragraph element under the heading.  Put some text in it.  Any text is fine.

Save and view.  The page should have a green background. 

Add a new rule set to the styles.  This is to style all p elements.  In this rule set add a rule to make the background colour red.Background colours

Save and view and it should look something like the screenshot.

Background texture

You have done colour backgrounds before but images can be better.  They can be horrible and slow as well though so pick your background images carefully.  One approach is to use a small texture which can be repeated on the page.  You can use a single image as a background but then how will you choose an image that fits on all screens perfectly? 

Download this image and save it to the folder which contains backgrounds.html.

In backgrounds.html add two new blank lines to the body rule set in the style element and put this code in:

background-image:url("texture.png");
background-repeat:repeat;

The first line identifies the image file to use.  The second says to repeat that image all across the page (known as tiling the image).  Save and try.

It is best to leave the background colour there as well.  It will be used if the image does not work for any reason.

Try a couple of experiments.  Use a different image (maybe a bigger one but still smaller than your screen - a photo).  Try it with and without repeat.

CSS does allow you to use background images which fit the screen (or other element) but you will learn that later as it does not always work easily.