Skip to main content
Engineering LibreTexts

6.3: Background Images

  • Page ID
    93816
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    Any HTML container, from the <body> tag down through the <span> tag, can use graphic images as backgrounds behind their text content. Of course, you need to be judicious in selecting images that do not overpower or detract from the text communication intended by the page.

    Image Sources

    Texture image.
    Figure \(\PageIndex{1}\): Texture image.  ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

    Most background images are textures rather than pictures. Pictures tend to be too "busy" and distract attention from the message. These textures are either standard GIF or JPEG images; plus, the images are usually not the full size of the container for which they provide the background. Textures are small, specially designed images that can be repeated across and down a page and fit together seamlessly to form a smooth backdrop.

    The accompanying graphic is typical of an image used as a background for page elements. It displays a texture that fits together side by side when the image is repeated horizontally and vertically across and down the background area of the page element. Repeatable textures such as this are sometimes difficult to make, but there are plenty to choose from at most Web clip-art sites.

    Background Styles

    There are four style properties pertinent to displaying background images behind text containers. These styles, shown in Figure \(\PageIndex{2}\), select an image, repeat an image, position an image, and affix an image for text over-scrolling. Not all properties are required for all background images.

    Property: Value
    background-attachment Sets how a background image is attached to a document, whether or not the image scrolls with the text.
    fixed
    scroll
    background-image Sets the background image of page element specified as
    url(url)
    none
    background-position Sets the location of the top-left corner of the background image relative to the top-left corner of the container element, using a measurement, a percentage, or a keyword or pair of keywords.
    left top
    left% top%
    top|right|bottom|left|center
    top left|top center|top right
    center left|center center|center right
    bottom left|bottom center|bottom right
    background-repeat Sets whether background image repeats horizontally, vertically, in both directions, or not at all.
    repeat-x
    repeat-y
    repeat
    no-repeat
    Figure \(\PageIndex{2}\): Background style properties.  ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

    A background image is specified with the background-image:url(url) property, where the location of the image file is given by its url address. If the image file is stored in the same location as the page, only the file name need be coded. If no other style settings are made pertaining to the background image, it is repeated horizontally and vertically, and across and down the container to fill the background with the image.

    The page shown in Figure \(\PageIndex{3}\) uses the background-image property to fill the page horizontally and vertically with a texture. No other style properties are required.

        <style>
          body {background-image:url(Background.jpg)}
        </style>

     

    Page with background image.

    Figure \(\PageIndex{3}\): Page with texture image used as background.  ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

     

    The Background.jpg image has an actual size of 144 x 144 pixels, or 2" square. With no additional style properties given, the image is automatically repeated across and down the page the fill to available space.

    Of course, it is not necessary to use repeatable textures as background images. You can make use of any GIF or JPEG image. You need to be cautious when using regular images as backgrounds since they may have colors that are too intense and make the overlaying text difficult to read. If you have photo editing software available you can reduce the opacity, or transparency, of the image to temper its intensity for use as a "watermark" image. This is done for the image shown in Figure \(\PageIndex{4}\).

        <style>
          body {background-image:url(Stonehenge.jpg)}
        </style>

    Background image with transparency.

    Figure \(\PageIndex{4}\): Page with repeated background image with reduced opacity. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

     

    As in the case of the previous background texture, the image repeats both horizontally and vertically to fill the page. This repeating pattern is more noticeable when using a regular graphic image.

    You can cause one or more background image to appear by coding the background-repeat property. The value repeat-x repeats the image horizontally for as many times as needed to fill the container from left to right thereby producing a single row of images; repeat-y repeats the image vertically for as many times as needed to fill the container from top to bottom subsequrntly producing a single column of images; repeat repeats the image in both directions to completely fill the container (the default value); and no-repeat produces a single image in the top-left corner of the container.

    If an image is not repeated, you can indicate the location of the single image inside the container by coding the background-position property. The following code positions an image in the center of the page with background-position:320px 150px. Browser output is shown in Figure \(\PageIndex{5}\).

        <style>
          body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
                background-position:320px 150px}
        </style>

    Page with single background image.

    Figure \(\PageIndex{5}\): Page with single background image positioned at exact pixel location.  ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

     

    The two pixel measurements--320px 150px--give the distance from the left and top of the page to the left and top of the image. In other words, the left edge of the picture is 320 pixels from the left edge of the page, and the top edge of the picture is 150 pixels from the top edge of the page. You may have to try several measurements before you get an image positioned to your satisfaction.

    In addition to specifying exact pixel locations for a background image, you can specify certain percentages of page width and page height for placement of the image. Also, various keywords or pairs of keywords can be used to position the image. The keyword top, right, bottom, left, or center positions the image, respectively, at the top-center, right-center, bottom-center, and center of the page. The keyword pairs top left, top center, top right, center left, center center, center right, bottom left, bottom center, or bottom right position the image at these named locations on the page.

    It is important to remember that these positions are relative to the full size of the Web page, not to the size of the browser window. Thus, an image positioned at the center or at the bottom of a page may not be visible until the page is scrolled to bring the image into view.

    In the above examples, the background image is scrolled when the text on the page is scrolled. For certain types of backgrounds, you may want the image to remain "fixed" so that text scrolls over the fixed background. This effect is accomplished with the background-attachment property. Its default value is scroll. Changing it to fixed keeps the background image in the same position while the text foreground scrolls over the top. This effect is shown in Figure \(\PageIndex{6}\).

        <style>
          body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
                background-position:320px 150px; background-attachment:fixed}
        </style>

    Page with fixed, scrollable background image.

    Figure \(\PageIndex{6}\): Page with fixed background image over which page content scrolls.  ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

    The previous examples show background images for an entire Web page; however, any container tag can have a background image. Figure 5-22 shows a paragraph with a background texture.

        <style>
        p#BKGND {background-image:url(Background.jpg); margin:20px; font-family:
                verdana; font-size:12pt; font-weight:bold; text-align:justify}
        </style>
    
        <h1>Paragraph Background Texture</h1>
    
        <p id="BKGND">This is a paragraph with a background texture. The default
        background-image property repeats the background pattern horizontally
        and vertically to fill the area of the paragraph.</p>
        Paragraph with background image

     

    Page with fixed, scrollable background image.

    Figure \(\PageIndex{7}\): Paragraph with background texture. ("MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4, GALILEO Open Learning Materials is licensed under CC BY-SA 4.0)

     


    6.3: Background Images is shared under a CC BY-SA 4.0 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?