Web backgrounds do not have to fill the browser screen.
Sometimes a lone, centered Web page background can create a dramatic effect that enhances the mood of a website. For example, an image of Earth floating against a black backdrop might enthrall visitors to an astronomy site. Many developers use style sheets to control the position and appearance of every object on a Web page. This includes backgrounds. Experiment with centered backgrounds by choosing one of your favorite images and styling it on your Web page.
Instructions
1. Open Notepad. Add the following text to create an empty HTML document:
Center a Web Page Test
This Page Has a Centered Background Image
This code creates a heading, a button and a text box.
2. Add the following Style Sheet code below "Insert style section here:"
body { background: url('xyz.jpg') fixed center no-repeat;}
This style definition centers the background image of the page's body. Replace "xyz.jpg" with one of your images.
3. Press "Ctrl+S" to open Notepad's "Save As" window. Enter "Center_Web_Page_Test.html" in the "File Name" box and click "Save." Notepad will save the HTML file.
4. Open a browser and press "CTRL+O" to open the "File Open" window. Locate the HTML file and double-click it. The browser will display it. Verify the browser centers the background image.
