1.Set the background color
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
2.Set an image as the background
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>
3.How to repeat a background image
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
4.How to repeat a background image only vertically
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
5.How to repeat a background image only horizontally
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
</body>
</html>
6.How to display a background image only one time
<html>
<head>
<style type="text/css">
body
{
background-image: url('bgdesert.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
7.How to place the background image
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-position:
center;
}
</style>
</head>
<body>
</body>
</html>
8.How to position a background image using %
<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>
</head>
<body>
</body>
</html>
9.How to position a background image using pixels
<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>
</head>
<body>
</body>
</html>
10.A fixed background image (this image will not scroll with the rest of the page)
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<body>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
<p>The image will not scroll with the rest of the page</p>
</body>
</html>
11.All the background properties in one declaration
<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>
