{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Background Properties Tutorials

CSS allows you to specify the background color of an HTML element and also control and placement and positioning of background images.

The background properties are listed below:

background-color Sets the background color of an element
background-image Sets the background image for an element
background-repeat Sets how a background image will be repeated
background-attachment Specifies whether a background image will have a fixed position or if it will scroll with the rest of the page
background-position Sets the starting position of a background image
background Sets all of the individual background properties in one declaration

Background Color

CSS properties allow you to specify the background color of an HTML element.

The values that the background-color property can have are listed below:

color name a color name, for example, red or blue
hex code a hex value, for example, #000000 or #ff0000
RGB code an RGB value, for example, rgb(255,0,0)

The code example below shows you how to specify the background color of an HTML document using the background-color property.

<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background-color:blue; } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-color Property Example.

Background Image

The background-image property specifies an image to use as the background of an HTML element. By default, the image that is specified by the background-image property will be repeated and will cover the entire HTML element.

The code example below shows you how to use the background-image property. The image that will be used is shown below.

css background property tutorial

The code example below shows you how to set a background image using the background-image property.

<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background-image:url('image.png'); } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-image Property Example.

Repeat a Background Image Horizintally

By default, the background-image property will repeat an image both horizontally and vertically. To make an image repeat only horizontally, use the background-repeat property with a value of repeat-x after the background-image property.

The code example below shows you how to set a background image to repeat horizontally only.

NOTE: This image used is for the purposes of this tutorial only.

<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background-image:url('image.png'); background-repeat:repeat-x; } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-repeat Property Example.

Repeat a Background Image Vertically

By default, the background-image property will repeat an image both horizontally and vertically. To make an image repeat only horizontally, use the background-repeat property with a value of repeat-y after the background-image property.

The code example below shows you how to set a background image to repeat vertically only.

NOTE: This image used is for the purposes of this tutorial only.

<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background-image:url('image.png'); background-repeat:repeat-y; } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-repeat Property Example.

Background Image that Does Not Repeat

By default, the background-image property will repeat an image both horizontally and vertically. To have a background image that does not repeat, use the background-repeat property with a value of no-repeat after the background-image property.

The code example below shows you how to set a background image that does not repeat.

<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background-image:url('image.png'); background-repeat:no-repeat; } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-repeat Property Example.

Set Position of Background Image

By default, the background-image property will repeat an image both horizontally and vertically. To have a background image that does not repeat, use the background-repeat property with a value of no-repeat after the background-image property. To set the position of the background image, use the background-position property.

The code example below shows you how to set a background image that does not repeat and has a set 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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background-image:url('image.png'); background-repeat:no-repeat; background-position:center top; } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-position Property Example.

Shorthand Background Property

You can use the shorthand background property to set all of the background properties in one declaration.

The code example below shows you how to use the shorthand background property to set all off the background properties in one declaration.

<!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> body { background:yellow url('image.png') center top no-repeat; } </style> <body> <p> This is a paragraph. </p> </body> </html>

The web page that the code example creates is here: CSS background-position Property Example.

Tutorials

Templates

References

Sponsors

You can get your website online using Velnet, a leading UK web hosting provider. They provide free template and installation for WordPress blogs. Discuss webmaster related topics at Webmaster Serve, a Webmaster SEO forum

SouthernWebGroup.com provides high quality website design in Atlanta, GA as well as around the world.

Find low cost cheap website hosting and domain registration.

Browser our free no ads web hosting directory and find the free web hosting that's right for you and your budget.

Advertise your web design and web development related products and services here.

Recommended

Download free css web hosting templates that are easy to edit at FreeWebHostingTemplates.com.

Friends