How to Build a Website from Scratch: Part 2

Adding Images for the Body Backgroud, Header, and Main Areas

Most websites have images embedded on their pages, either for decoration or to clarify something explained in the text. Adding images to your website's pages requires only a few lines of code in the CSS and HTML files. If you want the image to go in the same spot on every page, you can specify this in the style sheet. If you only want certain pages to have certain images, you can add them in the HTML files of those pages.

In this tutorial we will discuss how to fill in the white space around the webpage with a repeating image (tessellation), how to make a header image, and how to embed an image within the text.

Step 1: Creating the Image Folder and the Body Background Tessellation

Inside your "My Website" folder, create a new folder called "images" with a lowercase "i." This is where you will store all of the pictures and graphics for your website. The first image we will create is going to fill in the white space around your web page. First, open Paint or another image creation program. Right click on the small graphic below, click "Copy," and then paste the graphic into your image creation program. If necessary, crop the area so that the total size of the graphic is restored to 18 pixels by 18 pixels.

Save this image as "bodybg.jpg" in your "images" folder. Case is important, so make sure all of the letters are lowercase. This image will tile the white space, forming a diagonal lattice.

Step 2: Creating the Header Image

Openup a new document in your image creation program, and create a picture that is 900 pixels wide and 100 pixels tall. Save this image as "sampleheader.jpg" inside the "images" folder. If you don't feel creative, you can use this header image.

Step 3: Creating an Image to Go with the Text

Find an image from the web or your own computer, and use Paint to crop or rescale it to a size of 300 pixels by 300 pixels. Save this image as "textpic.jpg" inside your "images" folder. If you want to save time creating or finding a suitable image, you can use this sample image.

Step 4: Adding the "textpic" Image to Your Webpage

Use Notepad or TextEdit to open up the "index.html" file that you created in Part 1 of this tutorial. Look for the <div id="main"> tag. Hit enter after the tag, and insert this line of code:

<img src="images/textpic.jpg">

Hit enter again, and the click "Save" to save the changes to the HTML file. If you open the index file with a web browser, you will now see an image above the text in the main area. If you want to center the picture, replace <img src="images/textpic.jpg"> with this line of code:

<div style="width:300px; margin-right:auto; margin-left:auto;"><img src="images/textpic.jpg"></div>

The set of div tags around the image contains CSS commands that center the image. The "auto" margins on the left and right automatically center the picture. If you want the picture on the left and the text beside it on the right, use this line of code instead:

<div style="margin-right:20px; float:left;"><img src="images/textpic.jpg"></div>

The "float" command tells the browser to float the image on the left side of the page, and start the text at the top of the page on the other side of the image.

Step 5: Adding the Background and Header Images to Your Webpage

Open the "mystylesheet.css" file with either Notepad or TextEdit. At the top of the document, above the #container section, insert these lines of code:

body{
  background-image:url(images/bodybg.jpg);}

Next, look for this line of code underneath the #header section:

background:#ffaaaa;}

Replace it with this line of code instead:

background-image:url(images/sampleheader.jpg);}

These two changes set the background image for the header and the white area outside of the container. For one last refinement, you can change the background color of the container from black to light blue. This will eliminate the black space under the left side bar. Simply find this line of code in the #container section:

background:#000000;

and replace it with this line of code instead:

background:#aaaaff;

Hit "Save" and reopen the index file with your favorite web browser. You should now see a criss-cross background on the sides of the page, and a new header image. If you have unwanted text in the header, go back to the "index.html" file and erase the paragraph between the <div id="header"> and </div> tags.

© Had2Know 2010

How to Encrypt HTML and JavaScript (and decrypt it too)

How to Fix a Stuck Pixel

Is This MP3 Download Site Legal?

How to Build a Website From Scratch: Part 1