How to position a background image on a web page with CSS
The code below shows you how to position a background image on a web page with CSS.
<!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>Web Development Tutorials.com</title>
<style type="text/css">
body
{
background-image:
url('imagewebdevelopmenttutorials1w244h33.jpg');
background-repeat: no-repeat;
background-position: top center;
}
</style>
</head>
<body>
</body>
</html>
The link below is the page created by the above code:
how to position a background image on a web page with CSS
The background-position property can have the following values:
| property | values |
| background-position |
top left
top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
Use the text editor below to practice what you have learned.