CSS background-image

Description

Use the background-image property to display an image in the background of an html element.

the image will appear in the position set using background-position. Also the image may tile in either y or x axis depending on the setting of background-repeat.

    
        background-image: url(URL);   /* e.g. background-image: url(images/image1.jpg); */
        or
        background-image: none;
        or
        background-image: inherit;
        

See also: background-color, background-position, background-attachment, background-repeat

Examples for css background-image

This is the image we will be using as our background:   

---

This is the simplest example where we just add the image to the background. The interesting points to note here are that a) the image is smaller than the element so the image is tiled b) the image is tiled both horizontally and vertically. The following examples will show how to control this tiling to our advantage using the repeat properties.

    <style>
        #test { background-image: url(../images/grad.gif); }
    </style>

    <div id="test">
        test <br/>text<br/>test<br/>text<br/>
        test <br/>text <br/>test <br/>text <br/>
    </div>Give it a go!

This time we use the background-repeat properties so we only tile the image horizontally. This is a really cool feature as the browser will keep on repeating when you expand a window so the image only needs to be really small - try the give it a go feature and expand and contract the width of the browser and you will see what I mean. You can use to create title bars, menu bars etc. :

    <style>
        #test2 { background-image: url(./images/grad.gif); background-repeat: repeat-x; }
    </style>

    <div id="test2">
        test <br/>text<br/>test<br/>
    </div>Give it a go!

Values for <background>

Name	Values	Description
background-image	url(URL) e.g. url(images/image1.jpg) none	Specifies an image to display in the background of the element
background-color	red #ff0000 rgb(100%,0%,0%) transparent	Set the background color of the element.
background-repeat	repeat repeat-x repeat-y no-repeat	Specifies the repeat style of the background image. repeat-x causes tiling to the left and the right, repeat-y causes tiling up and down
background-attachment	scroll fixed	Specifies if background image scrolls or is fixed when the page is scrolled
background-position (note two values one for x and one for y	For y    %|px|top|center|bottom For x:    %|px|left|center|right e.g. top left e.g. 50% right e.g. 50% 20px	Specifies the position of the background image. Or if tiling then indicates the origin of the tiling