facebook google plus twitter
Webucator's Free CSS Tutorial

Lesson: Backgrounds and Colors

Welcome to our free CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will learn to modify font and background colors and background images with CSS.

Lesson Goals

  • Work with the color property.
  • Work with the background-color property.
  • Work with the color opacities and gradients.
  • Work with the background-image property.
  • Work with the background-repeat property.
  • Work with the background-attachment property.
  • Work with the background-position property.
  • Work with the background-cover property.

About Color Values

Color values can be specified using several ways.

Color Names

There are 17 basic keyword color names that are specified in CSS3. Modern browsers support many additional color names - everything from papayawhip to darkorchid .

<div style="color: red;">color: red;</div>

Hexadecimal Color Values

Hexadecimal color values take the format #rrggbb, where rr is the amount of red in the color, gg is the amount of green in the color, and bb is the amount of blue in the color.

<div style="color: #ff0000;">color: #ff0000;</div>

Short Hexadecimal Color Values

Hexadecimal color values can be abbreviated when a color is represented by three pairs of hexadecimal characters. For example, with #ff6600, you can remove one character from each pair. The shorthand color values take the format #rgb, where r is the amount of red, g is the amount of green in the color, and b is the amount of blue. For example, #f60 is the same as #ff6600.

selector {
	color: #f60;
}

Functional Notation

Functional notation takes the format rgb(n,n,n), where n is a number between 0 and 255 or percentage between 0% and 100% for the red, green, and blue intensities of the color, respectively.

<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div>
<div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>

CSS3 offers the use of RGBA-format color names, with the additional (the "a") parameter specifying the opacity (the "alpha" channel) of the color as a decimal between 0.0 (completely transparent) and 1.0 (completely opaque). Thus, the code

<div style="background-color: rgba(255,0,0,0.5)">
color: rgba(255,0,0,0.5)
</div>

would style the div with a red background with 50% transparency.

Also new in CSS3 is the HSL specification. Supported in modern browsers (Internet Explorer from version 9), we use HSL to specify hue (a degree on the color wheel, with 0=red, 120=green, and 240=blue), saturation (a percentage, with 0% a shade of gray and 100% the full color), and lightness (a percentage, with 0% as black and 100% as white). The following code displays a div with red background:

<div style="background-color: hsl(0,100%, 50%)"></div>

Recommendation

Our recommendation is to use three-character hexadecimal notation (i.e., #rgb) when you can get the color you want and to use the six-digit hexadecimal notation (i.e., #rrggbb) when you need to define the color more granularly.

Color

As you have seen in the examples above, the color property is used to set the foreground color of an element.

Code Sample:

BackgroundsAndColors/Demos/Color.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Color</title>
</head>
<body>

<h1>Color</h1>

<div style="color: red;">color: red;</div>
<div style="color: #ff0000;">color:  #ff0000;</div>
<div style="color: #f00;">color: #f00;</div>
<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div>
<div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>
<div style="color: hsl(0,100%, 50%);">color: hsl(0,100%, 50%);</div>

</body>
</html>

The above code will render the following:Color

Background-color

The background-color property is used to specify the background color of an element. It can be applied to block elements and inline elements.

selector {
	background-color: color;
}

Code Sample:

BackgroundsAndColors/Demos/BackgroundColor.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Background Color</title>
</head>
<body>
<h1>Background Color</h1>

<div style="height: 100px; width: 500px; background-color: #ff0000;">
	background-color: #ff0000;
</div>

<div style="height: 100px; width: 500px; background-color: rgba(255, 0, 0, 0.5);">
	background-color: rgba(255, 0, 0, 0.5);
</div>

<div style="height: 100px; width: 500px; background-color: rgba(255, 0, 0, 0.1);">
	background-color: rgba(255, 0, 0, 0.1);
</div>

</body>
</html>

For the top element, we use a hexadecimal notation to specify the background color. For the second two elements, we use RGBA notation, with a 50% and 10% opacity, respectively:

bg color

Background-image

Examples of properties associated with background images are shown in BackgroundsAndColors/Demos/BackgroundImage.html, which is listed at the end of this section.

The background-image property is used to specify the background image of an element. It can be applied to block elements and inline elements.

selector {
	background-image: url(images/bg.png);
}

Background-repeat

The background-repeat property is used with background-image to specify whether and how a background image should repeat. Possible values are listed below:

  • no-repeat - does not tile
  • repeat-x - tiles horizontally
  • repeat-y - tiles vertically
selector {
	background-image:url(url);
	background-repeat:value;
}

Background-attachment

The background-attachment property is used with background-image to specify whether a background image should scroll as the content is scrolled or whether the content should scroll over it. Possible values are listed below:

  • scroll
  • fixed
selector {
	background-image:url(url);
	background-attachment:value;
}

According to the specification, background-attachment specifies whether a background image is fixed relative to the viewport (e.g., the browser window) or scrolls along with the document.

Background-position

The background-position property is used with background-image to specify the location of a background image. Possible values are listed below.

  • top
  • right
  • bottom
  • left
  • center
  • any combination of the above (e.g., top center or bottom left)
selector {
	background-image:url(url);
	background-position:value;
}

Background-size

CSS3 introduces the background-size property, allowing us to control the size of the background image as displayed in its parent element (the element for which the image serves as the background). We can use any of the following as values for background-size:

  • auto, the default value.
  • a length, setting the width and height of the background image (in any valid CSS length units), e.g., background-size:20px 40px.
  • a percentage, setting the width and height as a percentage of the parent element, e.g., background-size:50% 50%.
  • cover, scaling the background image to be as large as possible so that the area of the element is completely covered by the background image; some part of the image may not be shown.
  • contain, scaling the background image to the largest size so that its width and height fit inside the element.

The following page shows examples of different combinations of background properties:

Code Sample:

BackgroundsAndColors/Demos/BackgroundImage.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Background Image</title>
</head>
<body>
<h1>Background Image</h1>

<div style="height: 200px; width: 500px; color: #ffffff; 
			background-image: url(Images/block.gif);">
	background-image: url(Images/block.gif);
</div>

<h2>Background Repeat</h2>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600; 
			background-image: url(Images/block.gif); background-repeat: no-repeat">
	background-color: #ff6600; background-image: url(Images/block.gif);
	background-repeat: no-repeat;
</div>
<hr>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600; 
			background-image: url(Images/block.gif); background-repeat: repeat-x">
	background-color: #ff6600; background-image: url(Images/block.gif);
	background-repeat: repeat-x;
</div>
<hr>
<div style="height:200px; width: 500px; color: #ffffff;
			background-color: #ff6600; 
			background-image: url(Images/block.gif); background-repeat: repeat-y">
	background-color: #ff6600; background-image: url(Images/block.gif); background-repeat: repeat-y;
</div>

<h2>Background Attachment</h2>
<h3>background-attachment: fixed</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			overflow: scroll; white-space: pre;
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: fixed;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: fixed;<br>
---- C O D E   O M I T T E D ----

			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: fixed;
</div>
<h3>background-attachment: scroll</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			overflow: scroll; white-space: pre; 
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: scroll;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: scroll;<br>
---- C O D E   O M I T T E D ----

			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-attachment: scroll;
</div>

<h2>Background Position</h2>
<h3>background-position: right</h3>
<div style="height: 200px; width:500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: repeat-y;
			background-position: right;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: repeat-y; background-position: right;
</div>
<h3>background-position: bottom</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: repeat-x;
			background-position: bottom;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: repeat-x; background-position: bottom;
</div>
<h3>background-position: center</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-position: center;">
			background-color: #ff6600; background-image: rl(Images/block.gif);
			background-repeat: no-repeat; background-position: center;
</div>
<h3>background-position: 20% 20%</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-position: 20% 20%;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-position: 20% 20%;
</div>
<h3>background-position: 20px 20px</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-position: 20px 20px;">
			background-color: #ff6600; background-image: url(Images/block.gif);
			background-repeat: no-repeat; background-position: 20px 20px;
</div>

<h2>Background Size</h2>
<h3>background-size: 10% 90%</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: 10% 90%">
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: 10% 90%;
</div>
<h3>background-size: cover</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: cover">
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: cover;
</div>
<h3>background-size: contain</h3>
<div style="height: 200px; width: 500px; color: #ffffff;
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: contain">
			background-color: #ff6600;
			background-image: url(Images/block.gif); background-repeat: no-repeat;
			background-size: contain;
</div>

</body>
</html>

Colors and Backgrounds

Duration: 15 to 25 minutes.

In this exercise, you will continue to work on Stories.html by applying background and color styles.

  1. Open BackgroundsAndColors/Exercises/Stories.html.
  2. Modify the color and background properties of the different elements on the page. You may do this using inline styles, an embedded style sheet, and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with backgrounds and colors in CSS.
  3. There are images in Exercises/Images that you may want to use. You're also welcome to use any other images you have access to.
  4. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

BackgroundsAndColors/Solutions/Stories.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Stories</title>
<style>
	h1
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
		letter-spacing:.25em;
		word-spacing:.4em;
		text-align: center;
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
		line-height: 1.2;
		text-indent: 2em;
	}
	
	a
	{
		font-style: italic;
		font-weight: bold;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
	
	.BackToTop
	{
		text-decoration: none;
		text-transform: capitalize;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>
<div style="background-image: url(Images/poohsmall.gif); 
			background-repeat: no-repeat; background-color:#ff9900; 
			color:#000066;">
<p>Pooh always liked a little something at 
---- C O D E   O M I T T E D ----
and said to himself 'Silly Old Bear!'</p>
</div> 
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>
<div style="background-image: url(Images/TeaParty.gif); 
			background-position:right; background-repeat: no-repeat;">
<p>There was a table set out under a tree
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<div style="background-image: url(Images/Cupid.gif); color:#ff3333;">
<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
 and you know, too, how ill-behaved he is!</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>
</body>
</html>