Adding a background image with CSS- The absolute basics CIT WINTER SEMESTER 2014 PRESENTED BY COLBY GRIFFITHS

The Goal The goal is to have a background picture on the website

Step 1 You can start with a blank page or one that already has some CSS work done on it. The page below has some styling.

Step 2 Find an image to use for your background. Make sure it is your picture or a picture you have permission to use. (This image works good for the website I am building.)

Step 3 Place the image in the image files folder for your website. Once the image is in the folder you are ready for CSS coding. In your CSS stylesheet it is time to write the code to make the image your background. For this tutorial we will use the picture for an entire background image. You can have multiple background images but we will just use one here. The easiest way will be to put it in the body. Example code: Body{ background-image: url(/images/windchill.png) }

Step 3 cont’d Example code: Body{ background-image: url(/images/windchill.png) } The URL is the location of the image on your website and the name of the image file. In this case the image is located in the “image” folder of my website and the name of the image is “windchill.png”.

Step 3 result The website now looks like this below. Notice that the image is completely in the background and the blue box covers up some of the image. Also on the right side the image is repeated because of the size of the screen.

Step 4 To keep the image from repeating you can use the code: body{ background-image: url(/images/windchill.png) background-repeat: no-repeat; } The result will be that the image displays only once.

Extras There are many things that you can do to style a background image. A good website to learn about those is:

My end result I chose to use the opacity style to make the image visible through the blue box on my website. Code that I used for this page: body{ background-image: url(/images/windchill.png); background-repeat: no-repeat; opacity : 0.8; }

The End