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>
