- 1). Open Notepad. Add the following text to create an empty HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Center a Web Page Test</title>
<!--Insert style section here**-->
</head>
<body>
<h1>This Page Has a Centered Background Image</h1>
<input type="button" value="button" /><input type="text" />
</body>
</html>
This code creates a heading, a button and a text box. - 2). Add the following Style Sheet code below "Insert style section here:"
<style>
body { background: url('xyz.jpg') fixed center no-repeat;}
</style>
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.
Source...