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

Adding a background image

with CSS-The absolute basics

CIT230-05 WINTER SEMESTER 2014

PRESENTED BY COLBY GRIFFITHS

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

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

styling.

Step 2Find 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 3Place 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 resultThe website now looks like this below. Notice that the image is completely in the background and the blue

<div> box covers up some of the image. Also on the right side the image is repeated because of the size of the

screen.

Step 4To 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.

ExtrasThere are many things that you can do to style a

background image. A good website to learn about those is:

http://www.w3.org/community/webed/wiki/CSS_background_images

My end resultI chose to use the opacity style to make the image visible

through the blue <div> 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