CSS Background Tutorials

CSS background properties allow you some control over the presentation of the background.

Background Color

The "background" property allows you to specify a solid background color of an (X)HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: yellow; } </style> <html> <body> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

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

This is a paragraph.

This is a paragraph.

This is a paragraph.

Set an Image as a Background

CSS allows you to set an image as the background with the "background" property.

The code below shows you how to set an image as the background with the "background" property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: url('image'); } </style> <html> <body> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

The code above would create a web page that would look like the example page below.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Set a Background Image Vertically

CSS allows you to set a background image vertically only with the use of the "background" property.

The code below shows you how to set a background image vertically only with the use of the background property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: url('image') repeat-y; } </style> <html> <body> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

The code above would create a web page that would look like the example page below.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Set a Background Image Horizontally

CSS allows you to set a background image Horizontally only with the use of the "background" property.

The code below shows you how to set a background image Horizontally only with the use of the background property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: url('image') repeat-x; } </style> <html> <body> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

The code above would create a web page that would look like the example page below.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Display a Background Image only One Time

CSS allows you to display an image in a background only one time, if you choose to, with the "background" property.

The code below shows you how to display a background image only one time with the use of the background property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> body { background: url('image') no-repeat; } </style> <html> <body> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

The code above would create a web page that would look like the example page below.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

Web Hosting Resources

Free Website Templates