Styling Backgrounds With CSS
Lessons Covered


If you were following the tutorials from the HTML section you may have always been wondering "How do i apply a background ?"

While backgrounds can be applied using HTML, CSS is the prefered choice as it is more efficient. In this lesson you will learn all about applying backgrounds to your webpages using CSS.


Background-Color Property

The background-color property is one of the most frequently used to style pages. Colored backgrounds are employed by using this property.

Colors are specified in one of three ways; It can be specified by color name ( example white ), by a unique hexadecimal number ( example #FFFFFF) or by an rgb (red, green, blue) value [ example rgb( 255,255,255 ) ].

You should be familiar with applying all these values in a style sheet as they were disucssed earlier as a part of the color property.


The background color is applied like this:

background-color: #D8D8D8; <----- This hexadecimal values gives a shade of  grey


The above hexadecimal value on the color chart corresponds to a shade of purple. To apply this shade of purple to the body of an html document we would have:

style.css

body
{
background-color: #D8D8D8;
}

arrow  Click to see result


Background-Image Property

This property in CSS is used to apply a background image to your page. If that image is big enough it may cover the entire page, however if the image is small it may repeat until the entire background is covered.


The property is used like this: 

background-image: url('background.jpg'); <----- url provides name and location of image


The url of an image is used to specify the location and name of the image file. In the above it is assumed that the image file is located in the same location as this web page so there is no need to reference any other folder. The name of the image is background and the extensiom .jpg.

Providing a link to the same image assuming it is in a sub-folder titled images would look like this:

style.css

body
{
background-image: url('images/background.jpg');
}

arrow  Click to see result


Background-Repeat Property

The background-repeat property is used closely with the background-image property. It specifies whether an image should be repeated only vertically, only horizantally or none at all. The values of this property are repeat-y and repeat-x . They can be considered to be similar to a graph where the y-axis represents vertical and the x-axis represents horizantal. If no background-repeat property is set, the image by default repeats both vertically and horizontally.

To repeat the image vertically: 

body
{
background-image: url('images/flower.jpg');
background-repeat: repeat-y;
}

arrow  Click to see result


To repeat the image horizontally: 

body
{
background-image: url('images/flower.jpg');
background-repeat: repeat-x;
}

arrow  Click to see result


To have the image not repeat at all: 

body
{
background-image: url('images/flower.jpg');
background-repeat: no-repeat;
}

arrow  Click to see result


Background-Position Property

The background-position property allows you to position the background. You can specify the positioning for your background a number of ways. Two of the most frequently used ways are by percentage value       ( example 50 % 50% ) and stating the position ( example top right ). By default, any image you apply is positioned in the top left corner.


Possible positions include: top left, top center, top right, bottom left, bottom center, bottom right, center left, center right, center center

The background-position property is employed like this: 

background-position: top right; <----- Image displayed in top right corner


If we use percentage values we can have: 

background-position: 80% 40%; <----- First percentage value represents horizantal 
                                  position.  Second percentage value represents 
			         vertical position


This is how it could look specified in a style sheet:

style.css

body
{
background-image: url('images/flower.jpg');
background-repeat: no-repeat;
background-position: top right;
}

arrow  Click to see result


Background-Attachment Property

Have you ever visited certain websites and wondered how a background moved with you as you scrolled down ? It is accomplished by using the background-attachment property. The background-attachment property is used to determine whether a background should scroll or remain in a fixed position. The value of the background-attachment property can be fixed or static.

It is represented like this: 

background-attachment: fixed; <----- The background image remains in a fixed position


Applying this to a style sheet we could have:

style.css

body
{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-attachment:  fixed; 
}

arrow  Click to see result


That's about it for what you need to know on applying backgrounds. Try experimenting with the properties on your own and have fun. When you are ready, move on to the next lesson.


Previous Lesson Previous Lesson - Fonts                                             Next Lesson - Links Next Lesson