Placing A Background Image On A Webpage Using Cascading Style Sheets

Guest Author - Diane Cipollo

You can use Cascading Style Sheets to place an image on the background of your webpage. You have the option to tile the background image over the webpage just as you can with HTML. However, you also have several other options when using CSS.

Let's take a look at an example.

Basic CSS Code

Example

Selector

body

To tile a background image across your webpage you would use the body selector in the HTML <body> tag to tell the web browser to apply this style to the background of the entire webpage.

Property

background-image

The background-image is the attribute used to tell the web browser where to find the image you wish to use as your background image. The property name, background-image, is followed by a colon (:).

Value

url("myimage.jpg")

On the right of the colon is the value for the background-image attribute. It will begin with "url" followed by the location (the web address) for the image file that you wish to use. Place this address between quotation marks and parentheses. In our example, the image file is in the same location as the webpage. Therefore, we would only need to use the name of the image file, myimage.jpg, inside the quotation marks and parentheses. However, if the image file is in a different location, you would use that location (web address) as the value of the background-image property just as you would when coding HTML. If you do not wish to use a background image, use the syntax none.
background-image: none

Property

background-repeat

The background-repeat is the attribute that is used to tell the web browser how to tile the image over the webpage. You have several options here. You can tile the image across the webpage both horizontally and vertically (as in HTML). You can also tile the image only horizontally, only vertically or not at all.

Value

repeat

On the right side of the colon is the value for the background-repeat attribute. In our example, we want the image to be tiled both horizontally and vertically over the webpage. Therefore the value is set to repeat. Below are the other values you may wish to use.

background-repeat: repeat-x
This will tile the image across the webpage horizontally.

background-repeat: repeat-y
This will tile the image across the webpage vertically.

background-repeat: no-repeat
The image will appear on the webpage but will not be tiled.