Links

Did You Know?

 

Using Page Background Images

HTML has allowed us to set background colors and graphics almost since the beginning of the code's existence. This capability however, has been limited to the background of the entire Web page. The ability to position the graphic was also severly limited. Now with CSS we can place a graphic as a background, or even as the background o f an element box. This lesson will explore all of the different effects that can be achieved with using CSS for bacgrounds.

 

Applying an Image Background to Your Page

As we have seen in the past, if you want to affect a property of the entire page, you must apply the changes to the body tag. The code example below shows how to use CSS with the body tag to apply a page background.

Css For Your Page Code 3

In the above example I have set the background color to display white and then I have specified an image to display in the background of the page.

Note: It is important that you place images in an images folder as usual to make this effect work. If the browser can't follow your directions it will not display the picture.

Css For Your Page Code 3

By default the code places the image into the background in a repeating pattern. There are many options that we can use to position the image exactly how we want it.

 

Background-Repeat

You can choose how an image should repeat as a background. There are many different effects that can be acheived using this property.

Below I have used the no-repeat setting to make the image appear only once in the background.

Css For Your Page Code 4

It would display like this:

Css For Your Page Code 4

By default the single image will appear aligned to the left top. This would be fine if you weren't going to put any text on the page. As a result, CSS gives us the ability to position the image in other areas.

 

Background-Position

Background-Position does just what you would think. However, we have to remember that though there are 4 possible positions, we can combine some of the positions to acheive the desired effect. The following settings are available for this property.

In the example below I have used a comination of right and top.

Note: No comma or separator is required here to define multiple positions

Css For Your Page Code 4

As a result the image appears on the right side, in the top corner.

Css For Your Page Code 4

Keep in mind that only some positions may be combined. For example it would not make sense to combine right and left.

 

Background-Attachment

I'm sure you have seen this effect used at some point. If you choose not to set this property, your image will remain in one spot and when you scroll down your image will scroll off the screen. Instead you can have the image remain in the same place in your window as you scroll. There are only two settings for this property.

The code is applied as seen below:

Css For Your Page Code 4

Click Here To See The Effect

 

Applying Images As Element Box Backgrounds

As you may have suspected, you can apply an image background to an Element Box by using the same commands. In the code example below I have used an image to create a one-sided border effect.

Css For Your Page Code 4

What I've done here is create an element box out of an <h3> tag. The I changed the background color, added an image, positioned it to the left top, told it not to repeat, and then adjusted the padding on the left hand side so that the text would come after the image. The resulting effect is seen below:

Css For Your Page Code 4

 

Putting the Two Together

You can use background images in the <body> tag and in Element Boxes on the same page at the same time. When you do, the results can be be pretty neat. The picture below shows an example of using both simultaneously.

Css For Your Page Code 4