Chapter 7: Background
In this chapter, we’ll learn how to change the background properties of an element. These properties include changing its background color and background image.
For a start, let us first look at how to change the background color.
Background Color
To declare the background color of an element, we use the background-color property. Similar to how we specify the border color of our CSS boxes, we can declare the background color of an element using one of three notations: color name, rgb notation or hexadecimal notation.
Examples:
background-color: green;
background-color: rgb(0, 255, 0);
background-color: #00FF00;
Background Image
If you find it plain to just use color as the background of an element, you can choose to use an image. CSS allows us great flexibility in how we want the image to be displayed.
background-image
To use an image as the background, we specify the URL to the image using the background-image property.
Example:
background-image: url(“image1.jpg”);
background-repeat
By default, the background image is placed at the top-left corner of the element, and repeated both vertically and horizontally. If you do not want the background image to be repeated, you can use the background-repeat property to change it. The following list shows some commonly used values for the background-repeat property:
repeat
This is the default. Image will be repeated horizontally and vertically.
repeat-x
Image will only be repeated horizontally.
repeat-y
Image will only be repeated vertically.
no-repeat
Image will not be repeated.
Example:
background-repeat: repeat-x;
background-attachment
The background-attachment property specifies whether the background image should be fixed or scroll with the page. The two commonly used values are fixed and scroll. The default is scroll. Try the exercise at the end of this chapter to see how this works.
Example:
background-attachment: scroll;
background-position
The background-position property is very useful if you want to specify which area of the background image you want to display.
Suppose you have an element with width and height 100px each. If the background image that you use has width 200px and height 300px, only a portion of the background image will be displayed as the image is larger than the size of the element.
For instance, if you use the image above (200px by 300px) as the background image of a 100px by 100px element, only Area A (top left) will be displayed by default. What if you want to display Area F instead? To do that, you need to change the value of the background-position property.
The most common way to specify the background-position value is to use pixels. The syntax is:
background-position: xpos ypos;
To understand how this syntax works, let’s imagine a piece of cardboard with a 100px by 100px hole in the middle. This hole in the cardboard represents the HTML element. Now imagine your background image is underneath that cardboard. By default, the image will be aligned such that Area A is shown through the hole in the cardboard. If you want to display Area F instead, you have to shift the image (not the cardboard) 100px to the left and 200px up. To achieve this with CSS, you write:
background-position: -100px -200px;
The first number (-100px) shifts the image horizontally. If this number is positive, the image is shifted to the right. If negative, it is shifted to the left.
The second number (-200px) shifts the image vertically. If this number is positive, the image is shifted down. If negative, it is shifted up.
The best way to understand this concept is to try the exercises for this Chapter. I strongly encourage you to do them before moving on to Chapter 8.
Exercise 7
Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 7 - Background folder.
Exercise 7.1
1. Open the file Chapter 7 - Background.html concurrently in your browser and text editor.
2. Scroll the page in your browser window. The Learn Coding Fast logo is set as the background for the body element. Notice what happens to the logo as you scroll.
Now in the CSS declaration for body, change background-attachment: fixed; to background-attachment: scroll;. Refresh and scroll the page. Notice what happens.
3. Next, change background-repeat: repeat-x; in the body CSS rules to each of the following and notice what happens to the background logo.
(a) background-repeat: repeat;
(b) background-repeat: no-repeat;
(c) background-repeat: repeat-y;
Notice what happens in each case.
4. Next, change background-color: white; to background-color: #0000FF;. This should change the background color of the page to blue.
5. Finally, we are going to look at the background-position property. We’ll be modifying the rules for #box1 in the examples that follow. The image used in this example is ‘backgroundposition.png’ stored in the same folder. Have a look at the image before proceeding.
Notice that when background-position is set to 0 0 (the default), area A is displayed. Changing the background-position property will shift the background image with reference to area A.
In the source code CSS declaration for #box1, change background-position: 0 0; to
(a) background-position: -100px 0;
This shifts the background image 100px to the left. As the default area shown is Area A, after shifting 100px to the left, you should get Area B.
(b) background-position: 100px 0;
This shifts the background image 100px to the right. As the background-repeat property is set to no-repeat, no image will be displayed. This is because the background image has shifted out of the boundaries of box1.
(c) background-position: 0 -100px;
This shifts the background image 100px up. You should get Area C.
(d) background-position: 0 100px;
This shifts the background image 100px down. No image will be displayed as the background image has shifted out of the boundaries of box1.
(e) background-position: -100px -100px;
Try to figure out which area you’ll get.