1. Open example_page2.html inside of the stylesheet_example folder. We are about to create a new css rule but, in this case, we will not create a separate css document. Instead, we will create the rule inside of example_page2.html itself.
2. Just below the title tags, create <style> </style> tags, as shown here:
<title>Stylin Again</title> <style> </style>
Next, you are going to create a new rule between the style tags named “body” and add a background image to body that repeats. The image that you will use is named background.gif and lives inside of the pix folder. FYI, the body tag applies to the entire document and is neither a class or an id. It is simply body. When you finish, your code should look like this:
<style> body {background-image: url(pix/background.gif); } </style>
3. Preview the page in your browser. Chances are, your entire browser window is dominated by a hideous background that, believe it or not, comes from a very skinny image just one pixel high that repeats over and over. If, for some reason, your background image does not repeat, you can force it to with the code below.
background-repeat: repeat;
Just for fun change background-repeat: repeat to
background-repeat: no-repeat
and preview again. Do you see the image? If you look at the very top of your browser window you should be able to see one really skinny line of color. That is the image that controls the look of your page. FYI, there are additional options for background images including: repeat-y (vertical repeat only), repeat-x (horizontal repeat only), and gradient, which we are not going to get into here. If, however, you are curious about gradients visit http://www.cssmatic.com/ and play around with their gradient generator, which will generate code that you can add to a rule in your CSS.
4. Time for some right brain activity. Locate the background.gif file inside of the pix folder. Double-click on background.gif and open it with preview. (If you are an online student and using a PC you will need to use some other photo editor ) Once the image is open, you should see a long skinny line with at least two colors. That image forms the (hideous) background of your page. You may want to zoom in some with the magnifying glass in order to see the image better.
5. Click on the Show Markup Toolbar
and then use the draw tool (fourth from left) to change the color of the background.gif file. Save it and refresh your browser. Does your background in example_page2.html look different? Feel free to use the other tools, such as the zoom tool, to fine tune things.
7. Using Tools, adjust size, make the image much less skinny by adding say, 600px of height to your background image. Be sure to deselect Scale Proportionally or the image will also become VERY wide! Now see if you can figure out how to fill that space with additional colors.
9. Once you are sated, as always, link to example_page2.html from your homepage and upload everything to the server.