CoderTools Web site

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
HTML & CSS Editor with FTP / FTPS

Examples for css background-image

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

Example 1:

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.

test
text
test
text
test
text
test
text
    <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!
Example 2:

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. :

test
text
test
    <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


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

12/17/2014 6:55:47 AM
Terms Of Use | Privacy Statement | Copyright 2006-2010 © Independence Software LLP