Lecture Notes

Section 1: Introduction

Course Objectives

Section 2: CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS - Color Names and Codes
CSS Classes and Spans
CSS Divisions - DIVs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project - Introduction
CSS Project - CSS Rules
CSS Project - Navigation Rules
CSS Project - Responsive CSS
CSS Project - Page Elements

Lecture Notes

Course: CSS Fundamentals View Course Outline

Created by:





1h 47m 20s

Skill Level:




Students Enrolled:




Certification Type:

Completion Certificate

Lecture: CSS Backgrounds

In this lecture we will work with adding backgrounds to elements using the background property.

background-color: color, hexadecimal, rgb, transparent;
background-image: url(path_to_image);
background-position: background-repeat: no-repeat, repeat, repeat-x, repeat-y

To begin, we will need to create a file with our basic html structure.

We will apply our background to a div, so let's go ahead and create our <div> tags in the body.
We also need to create an ID Selector, so we can reference the ID that will contain the background properties for this <div>.

Setup a style sheet:
<style type="text/css"></style>

Create an ID, named div1.

Create the following declarations, for this ID:

#div1 {
width: 100%;
height: 500px;
border: 3px solid black;
background-color: blue;

Most of these declarations should look familiar.

The background-color property allows us to set a background color to an element. The value can be a color name, hexadecimal number, or an RGB color code.

Let's apply this ID to our <div>, and preview it in our web browser. The <div> has a blue background as defined in the background-color declaration.

In addition to a color background, we can also use an image as a background.

To do this, we need to use the background-image property. We will use the image stored in the downloads folder corresponding to this lecture. The image is a .jpg file, and it's dimensions are: 204px by 204px.

Now type in the following line in id #div1:

background-image: url(bg.jpg);, the url is the path to the image in your website directory.

Save your file again and refresh your browser. We can see that the background image was applied to our <div>, and also repeated so it fills the entire <div> with the specified image.

Let's say we only wanted to repeat the background horizontally along the x-axis. To do this we can use the background-repeat property.

background-repeat: repeat-x;

Save your file and refresh your browser. We can see the background now repeats only horizontally.

We can do the same vertically by changing the declaration to repeat-y. Let's try It and see the result.

If we did not want the background to repeat at all, we would use the no-repeat declaration.

Now say we wanted to specify the position of the background image placement. We can do this using the background-position declaration.

Add background-position: center;

Now save your file and refresh.

We can see that the background is now in the center of the <div>.

There are several other position values we can use as shown.

Go ahead and try different combinations of these declarations to see the effect each one will have on the end result.