How Create a Multicolor Background on a Web Page

Written by darrin koltow
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How Create a Multicolor Background on a Web Page
You can use cascading style sheets (CSS) create a multicoloured Web page background. (colour image by Georgios Kollidas from Fotolia.com)

New Web page authors can take several approaches to give a page a multicolour background. One common way involves cascading style sheets (CSS) to display the background image. CSS uses "tags" similar to those of hypertext markup language (HTML). These tags let the author manipulate all aspects of a Web page, including its colours for paragraphs, headings and backgrounds. The advantage of entering CSS tags manually is the author can tailor a page to her exact needs.

Skill level:
Moderate

Other People Are Reading

Things you need

  • A multicolour image file in JPEG, GIF, or other common format.

Show MoreHide

Instructions

  1. 1

    Click the Windows "Start" button. Enter "Explorer," then click the "Desktop" icon in Explorer's left pane.

  2. 2

    Right-click in Explorer's right pane and click "New," then "Folder." Enter "mypage" for the folder's name, then press "Enter" to navigate to the new folder.

  3. 3

    Right-click and select "New," then "Text document." Enter "mypage.htm" for the document's name. This action creates a blank text document ready to accept HTML code.

  4. 4

    Right-click the document and click "Open with," followed by "Notepad."

  5. 5

    Paste the following code into the document, which creates a Web page with some text on a plain, uncolored background:

    <html>

    <head>

    </head>

    <body>

    <h1>This appears on a multicolour background</h1>

    </body>

    </html>

  6. 6

    Paste the following code between the "<head>" and </head> tags. The code will tell your browser (once it loads the Web page), to display your image file. Replace the text that reads '<YOUR IMAGE'S FILE NAME>' with your image's file name. It must include the single quotation marks.

    <style type="text/css">

    Body

    {

    background-image:url('<YOUR IMAGE'S FILE NAME>');

    }

    </style>

  7. 7

    Copy, using Windows Explorer, the graphic file to be used as the background into the "mypage" desktop folder you made in step 4.

  8. 8

    Double-click, in Windows Explorer, the "mypage.htm" document. When the page loads it should have the colour background.

Tips and warnings

  • As a backup, make a note of the full path of the file you plan to use for the background art (e.g. "c:\users\JohnSmith\Pictures\MyColorfulBackground.gif").

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.