Arts >> Theater >> Opera

How to Make a Web Page Background With Image Center

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:

      <!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 id="Button1" type="button" value="button" /><input id="Text1" 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.

+:
+:

Opera

Related Categories