Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101


Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > Formatting > Background Image
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   Formatting: Background Image

A background color or image can be the background for a whole page or just one element on the page.

Maybe a solid color background is all you need. But, the right image for your page's background can make a big impact. Unfortunately it is easier to make a wrong choice than it is to make a right one.

Example: Using a background texture for a page and a background color behind text Example: no background image

Page with an image background and with solid white page background.

Current Trends: For company pages, most web designers these days are leaning toward using a white background or a set of related solid colors for the background in different sections of the page. Sometimes they use a subtle or muted image and put the text and other pictures on top. Other kinds of sites have their own trends. Whatever the site, the background should not be the most interesting thing about the page!

Tiling: If the image is smaller than the window, the browser will usually tile the image across the width of the page and then drop down to tile across again. The right image can create a subtle, pleasing, overall effect. The wrong image can look really bad.

Example page with brown backgroundsExample 1:
Icon: Mouse Click the illustration at the right to see a full-size example of the results of using a background on a page and background on elements of the page.

Clearly, if you really want to use a busy image for a background, your text color and size are important. Putting your text on a solid color background helps keep it readable.

Example 2:
Example page with green backgroundsIcon: Mouse Click
the illustration at the right to see a full-size example of the results of using a different background on the body and on elements on the same page as Example 1.

 


Code for a Background Image

For any HTML element, you can set a background color or image with CSS style. To use an image you use a different statement than for a background color. You must includes the path to the image file. That image path can lead to a web server, to a folder in the same web site, or the file can be in the same folder as the web page.

Old HTML Method: (Deprecated in HTML 4.01)

  • Full path - on a web server:

<body background="https://www.jegsworks.com/backgroundred.gif">

  • Relative path - in same folder as web page:

<body background="backgroundblue.gif">

New CSS Method:

You can put a style in an inline style, an internal style sheet, or an external style sheet.

  • Full path - on a web server:

     background-image: url('https://www.jegsworks.com/backgroundred.gif')
  • Relative path - up one level:

     background-image:url('../backgroundpurple.gif')
  • Relative path - from top of site, down to images folder:

     background-image:url('/images/backgroundpurple.gif')
  • Inline style - in same folder as page:

     style="background-image:url('backgroundpurple.gif');"

Icon: TipQuotes and Inline Styles: An inline style already has double-quote marks around the declarations. If you use another double-quote inside a declaration, the browser will think that the style is finished. Big whoops! Happily, you can use single quotes inside a set of double-quotes.

<body style="background-image:url('backgroundpurple.gif');"

Examples of Backgrounds:

Background image for page - Google

Whole page = Single image not tiled

Background image is a tiled texture


Texture image tiled behind page contentsWhole page = Tiled image

Tile: (full size image)

Background image with text area on top

Background texture - booksWhole page: Tiled image
Part of page: white background for content in middle & header

Tile: (image size reduced)

Solid color background for page plus background color for content

Background: Starfish imageWhole page = Solid color
Part of page: Solid white behind main contents
Part of page: Starfish image behind the sidebar text
Tile: (image size reduced)

Texture background for page and for content - spiral notebook effect

Whole page: Tiled image
Part of a page: Tiled image (spiral notebook effect)

Tile: (full size image)
Texture - full size
Tile: (cropped at right, border added)
Texture - spiralbind.gif (cropped at right)

Background image behind top part of page

Part of a page (not tiled):
Background image behind only top of page


Icon Step-by-Step

Step-by-Step: Background Image

 Icon Step-by-Step

What you will learn: to set a background image
to experiment with various kinds of background images

 Start with Icon: Class USB , hector18-Lastname-Firstname.htm, Notepad, resource files

You will experiment with using a background image for Hector's page. It won't be ready to publish yet! It's still going to be pretty rough. Later you will learn some ways to have your fancy backgrounds and still have a usable page!

Get Images

In a web site the background image may be stored in the same folder as the HTML page, in the top level of the web site, or in a folder with other images. The image could be anywhere. You have to get the path right.

You will need some background images for the steps below.

These should be already on your Class disk in the folder:
 
<letter of drive for Class disk>:\class\web project2

  1. If necessary, you can find each image and save it as you need it, from the online resources at https://www.jegsworks.com/lessons/resources/web_resources/HTML/.

    If you are working from a local copy of this web site, the same folders are there, starting with Lessons.

    To get a copy from the online resources:


Internal Style Sheet: Background Image

Now you can try out several different background images.

  1. If necessary, open hector18-Lastname-Firstname.htm in your text editor.

  2. Icon: Class USB Save As hector19-Lastname-Firstname.htm
  3. hector17.htm with pattern.jpg as backgroundpattern.jpgEdit the internal style sheet in the HEAD section to use the image pattern.jpg that is in the HTML folder below the page in the folder tree.

    body {
    background-image:url('HTML/pattern.jpg');
    color:navy;
    }
  4. Icon: Class USB Save.
    [hector19-Lastname-Firstname.htm]

  5. Switch back to your browser and view hector19-Lastname-Firstname.htm.

    The page shows with its new background. The page as a whole looks a lot different and you used just one small tiled image! The signature image has the wrong background once again. <sigh>


Icon: Experiment Experiment: Background Images

  1. Background images in the resource filesOpen a File Explorer window to your Class disk folder HTML where you previously copied some resource files.
    There are several background images in these resource files.
  2. Check the size of each background image in File Explorer.
    None of these are very large. A single large file takes longer to load than a small file that is tiled.
  3. Experiment with other backgrounds by changing the filename for the background image in the source code to a one of the resource files in the HTML folder.

    If you wish, you can use background images that you have on your computer. You will have to provide the correct path to that image, of course. Hint: Copy the image file to the HTML folder. That makes the path the same as in the previous steps.

    hector19 with background of a pale version of his signature (browser)WarningBackground too busy: Some images should not be used as backgrounds. It's hard to read the text on top of them, no matter what color or size the text is! Some files intended to be a watermark are too distracting when tiled.

    hector19 with blue side border repeated. Window was too wide for background image. (browser)WarningBackground too narrow: If the background image is not as wide as the window, the image repeats across the window. For example, at a window size of 800 x 600, the blueborder.gif will repeat.

    When you are ready to continue...

  4. Edit the page to use the background image bluepaper.gif.

    hector19 with bluepaper background, signature still in light blue hector19 with bluepaper background and transparent signature

    The signature image still has a light blue background. We really need a transparent version. You cannot create one with Paint, but there are a number of free web sites and free programs to download that will let you do that. Happily, there is one already in your resource files.

  5. Change the signature image to the transparent version, HTML/hchavez-transparent.gif.

  6. Icon: Class USB Save.
    [hector19-Lastname-Firstname.htm]