How to Make a Web Page Background
A web page background is the graphical design upon which the rest of the web page's design is laid. A background can be an aesthetically pleasing way to add color to an otherwise utilitarian layout. The web page background can be a simple solid color. Alternatively, a site's background can be a graphical image or photograph. Add a web page background to make your site's browsing experience more enjoyable.
Other People Are Reading
Instructions
-
-
1
Decide whether you want to use an image or photo as a background, or if you want to use a simple color. If using an image, continue to Step 2. If using a color, skip to Step 4.
-
2
Obtain an image. You may wish to use use a free image found online that is copyright-free or covered under the Creative Commons license. Alternatively, you may take a photo yourself using a digital camera.
-
-
3
Upload the photo to your web server using your FTP software. Use a plain text editor (e.g., TextEdit on a Mac or Notepad on a Windows PC) to open the HTML code for the web page in which you wish to use a background image. Insert the following code between the <head> and </head> tags at the top of the page: <style type="text/css"> body {background-image:url('IMAGE')} </style>. Change "IMAGE" to the file name for the photo you just uploaded. Save the file and refresh the page in your browser. The photo you uploaded will now be displayed as a web page background.
-
4
Use a text editor to open the web page if you want to use a simple color as a background. Between the <head> tags at the start of the page, insert: <style type="text/css">
body
{
background-color:COLOR;
}
</style> -
5
Change "COLOR" in Step 4 to the name of a specific color (e.g. red, yellow, black, blue). Save the page and refresh it in your browser to view your new colored background.
-
1
Tips & Warnings
Don't use a color that's too bright or a background image that's too complex or else it will be hard for your visitors to read your web page.
