CSS Background Property Tutorials

CSS background properties allow you to control the presentation of the background of HTML elements.

This is the first of two video tutorials.

This is the second of two video tutorials.

background-color Property

The CSS background-color property is used to set the background color of an HTML element.

The background-color property accepts any color value or the value of transparent: color keywords (for example, black for the color black.), RGB color values (for example, (0,0,0) for the color black), hexadecimal color values (for example, #000 for the color black) or short hexadecimal color values (for example, #000 for the color black).

The HTML document below shows you how to use the background-color property to set the background color of HTML elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> body { background-color:yellow; } div { float:left; width:100px; height:100px; border:1px solid black; margin:10px; padding:0; } div#blue { background-color:#0000ff; } /* hexadecimal color value for the color blue */ div#red { background-color:red; } /* shorthand hexadecimal color value for the color red */ div#green { background-color:(0,128,0); } /* RGB color value for the color green */ div#transparent { background-color:transparent; } </style> </head> <body> <div id="blue"></div> <div id="red"></div> <div id="green"></div> <div id="transparent"></div> </body> </html>

The code above would create a web page that looks like the image below.

css background-color property tutorial example

For a live demonstration of the HTML document that the code creates, is this link: CSS background-color property example.

background-image Property

The background-image property allows you to set an image as the background of an HTML element.

The code below shows you how to set an image as the background of an HTML elememnt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> body { background-image:url('web_browsers.jpg'); } </style> </head> <body> <h1>LearnWebsiteDesign.com</h1> </body> </html>

The image below is the one used in these background property examples:

css background-image property tutorial

For a live demonstration of the web page that the code above creates, click this link: CSS background-image property example.

background-repeat Property

By default, the background-image property repeats and image both horizontally and vertically. The background-repeat property allows you to set an image to repeat only horizontally or only vertically.

The code below shows you how use the background-repeat property to have an image repeat only horizontally.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> body { background-image:url('web_browsers.jpg'); background-repeat:repeat-x; } </style> </head> <body> <h1>LearnWebsiteDesign.com</h1> </body> </html>

The code above creates a web page that looks like the image below:

css background-repeat property tutorial

For a live demonstration of the web page that the code above creates, click this link: CSS background-repeat property example.

The code below shows you how use the background-repeat property to have an image repeat only vertically.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> body { background-image:url('web_browsers.jpg'); background-repeat:repeat-y; } </style> </head> <body> <h1>LearnWebsiteDesign.com</h1> </body> </html>

The code above creates a web page that looks like the image below:

css background-repeat property tutorial

For a live demonstration of the web page that the code above creates, click this link: CSS background-repeat property example.

background-attachment Property

The background-attachment property allows you to set whether a background image remains in a fixed position when the web page is scrolled up or down or whether the background image scrolls up and down with the content of the web page.

The code below shows you how to use the background-attachment property to give a background image a fixed position.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> body { background-image:url('web_browsers.jpg'); background-repeat:no-repeat; background-attachment:fixed; } </style> </head> <body> <h1>LearnWebsiteDesign.com</h1> <h1>LearnWebsiteDesign.com</h1> ... </body> </html>

The code above creates a web page that looks like the image below:

css background-attachment property tutorial

For a live demonstration of the web page that the code above creates, click this link: CSS background-attachment property example. Scroll the example web page up and down and notice that the background image stays in a fixed position.

background-position Property

The background-position property allows you to specify the position of a background image(s) within an HTML element.

The background-position property accepts percantage values, length values or position keyword values.

The code below shows you how to position background images using keyword values.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Document Title</title> <style type="text/css"> div#one { background-image:url('css_image.png'); background-repeat:no-repeat; background-position:top left; width:150px; height:150px; margin-top:10px; border:1px solid black; } div#two { background-image:url('css_image.png'); background-repeat:no-repeat; background-position:top right; width:150px; height:150px; margin-top:10px; border:1px solid black; } div#three { background-image:url('css_image.png'); background-repeat:no-repeat; background-position:center center; width:150px; height:150px; margin-top:10px; border:1px solid black; } </style> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html>

The image used for this background-position property example is shown below:

css icon

The code above creates a web page that looks like the image below:

css background-position property example

For a live demonstration of the web page that the code above creates, click this link: CSS background-position property example.