CoderTools Web site

CSS background-repeat Property

Description


Use the background-repeat property to control how a background-image is tiled 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-repeat: repeat-x;
        or
        background-repeat: repeat-y;
        or
        background-repeat: no-repeat;
        or
        background-repeat: inherit;
        
See also: background-color, background-position, background-attachment, background-image
HTML & CSS Editor with FTP / FTPS

Examples for css background-repeat

This is the image we will be using as our background for the background-repeat examples:   

Example 1:

This example uses the background-repeat property 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!
Example 2:

This time we use no-repeat so that the image is not tiled:

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

    <div id="test3">
        test <br/>text<br/>test<br/>
    </div>Give it a go!
Example 3:

This time we tile vertically by using repeat-y:

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

    <div id="test4">
        test <br/>text<br/>test<br/>
        test <br/>text<br/>test<br/>
        test <br/>text<br/>test<br/>
        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).

10/22/2014 4:54:50 PM
Terms Of Use | Privacy Statement | Copyright 2006-2010 © Independence Software LLP