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>
As you enter in the code, try to use Brackets’s helper tools to browse to the image.
3. Add an additional line of code that instructs your background image to repeat:
background-repeat: repeat;
Preview your page to see what you have created. 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.
4. Time for some right brain activity. Locate the background.gif file inside of the pix folder. Right-click on background.gif and open it with Adobe Photoshop. (If you are an online student and don’t have Photoshop, give it your best shot with https://pixlr.com/editor/ or some other photo editor ) Once the image is open, you should see a long skinny line with 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. Use the paintbrush tool to change the color of the background.gif file. Save the file by choosing “File > Export > Export As” and choose “GIF” as your file format[footnote]Apparently there’s an issue with the output for web from Photoshop’s standard Save command–sorry for the weird steps here.[/footnote].
6. Reopen example_page2.html and check out the changes. Alter the colors on background.gif again, save it and take another look at example_page.htm.
7. Time to turn the artist inside of you loose! Use Photoshop to create a brand new background image that is 40 pixels high and 1500 pixels wide. Paint this one with with the colors of your choice; as many colors as you want. Along the way, experiment with different brush settings to see what effect they have on the image (you will need to have the property inspector open and the brush selected). Save this image inside of the pix folder as background2.
8. Modify the body rule so that background2.gif becomes the new background image. Feel free to play and experiment with your background for a while.
9. Once you are done, as always, link to example_page2.html from your homepage and upload everything to the server.