CSS Background Code Tutorial

You can define the background effects of an HTML element with the use of CSS background properties.

How to set the background color with CSS

The following HTML and CSS code example shows you how to set the background color of an element.

<!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>this is the title of the web page</title>

<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: red;}
p {background-color: rgb(250,0,255);}
</style>

</head>
<body>
<h1>
This is a level 1 header
</h1>
<h2>
This is a level 2 header
</h2>
<p>
This is a paragraph
</p>
</body>
</html>

The following is a link to the web page that the above HTML and CSS code makes:
how to set the background color with CSS

Try it yourself. Enter the HTML and CSS code into the text box below to set background colors.

How to set an image as the background

The HTML and CSS code example below shows you how to set an image as the background.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial-image.jpg')
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to repeat a background image

The HTML and CSS code below shows you how to repeat a background image.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: repeat;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to repeat an image vertically only

The HTML and CSS code example below shows you how to repeat a background image vertically 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>
<title>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: repeat-y;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to repeat a background image horizontally only

The HTML and CSS code example below shows you how to repeat a background image horizontally 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>
<title>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: repeat-x;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to repeat one background image at a time

The HTML and CSS code example below shows you how to display one background image at a time.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to place a background image

To place a background image, the background-position property is used.

The values that can be used for the background-position property are:

The HTML and CSS code example below shows you how to place a background image on a web page.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-position: top center;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to place a background image using %

The HTML and CSS code example below shows you how to place a background image on a web page using percent.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-position: 75% 25%;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to place a background image using pixels

The HTML and CSS code example below shows you how to place a background image on a web page using pixels.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-position: 50px 200px;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example

How to place a fixed background image

The HTML and CSS code example below shows you how to place a fixed background image.

<!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>this is the title of the web page</title>

<style type="text/css">

body
{
background-image:
url('csshtmltutorial.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}

</style>

</head>
<body>
</body>
</html>

The following link is to the web page that the above HTML and CSS code makes:
HTML and CSS background example