XHTML and CSS - Background Images
Background Images
In this tutorial I'll be showing you how to add images as a background, first you'll need a image, you can use any image you want, I'll be using this one here. Make sure you save it as background.jpg and it's in the same directory as the XHTML webpage we're working on in this tutorial. I'm going to be adding the image background to the body.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { } </style> </head> <body> </body> </html>
The first thing is adding the image to the background to do this you need to use the background-image property and you need to set it to url(background.jpg) you might be wondering why you need the url() part and why you can't just set it to the image name.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { background-image:url(background.jpg); } </style> </head> <body> </body> </html>
By default as you can see the image is going to repeat left and right and top to bottom, you might not want it to do this. We can change this using the background-repeat property and setting it to no-repeat.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { background-image:url(background.jpg); background-repeat: no-repeat; } </style> </head> <body> </body> </html>
Now you'll see that there is only one image that doesn't repeat. You might be thinking what if I want to repeat the image left or right or top to bottom, you can do that by setting the background-repeat to repeat-x to repeat the image left to right or you can set it to repeat-y to repeat top to bottom.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { background-image:url(background.jpg); background-repeat: repeat-x; } </style> </head> <body> </body> </html>
The last thing I want to add in here is what if you want to have a non repeated image and not have it stuck at the left hand side of the screen, well you can to that with the background-position property, this takes 2 parameters the first is how far from the left you want the image and the second is how far you want the image from the top of the page, you can set these in either pixels with px of percent with %.
<html> <head> <title> This is the title. </title> <style type="text/css"> body { background-image:url(background.jpg); background-repeat: no-repeat; background-position: 50% 35px; } </style> </head> <body> </body> </html>
The 50% will make the image move to the center of the page "50 percent of the way across the screen" and the 35px will make the image move 35 pixels down the screen.

Page generated in 0.0064 seconds.