CoderTools Web site

CSS background-position

Description


Use the background-position property to change the position of a background image of an html element.

    
        background-position: [%|px|left|center|right] [%|px|top|center|bottom];
            
        for example:
        
        background-position: 50% 50%;   /* this one centers the background image */
        or
        background-position: left top;
        or
        background-position: right bottom;
        or 
        background-position: 50px 100px;
        or
        background-position: center;    /* will assume is the horiz value */
        
See also: background-color, background-image, background-attachment, background-repeat
HTML & CSS Editor with FTP / FTPS

Examples for css background-position

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.

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

            width:80%; 
            margin-left:10%; 
            height:200px; 
            background-color:blue;
            
        }

    </style>

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

Example 2:

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>
        #test2 { 
           
            background-image: url(./images/grad.gif); 
            background-repeat: no-repeat;
            background-position: right bottom; 

            width:80%; 
            margin-left:10%; 
            height:200px; 
            background-color:blue;
            
        }

    </style>

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

Example 3:

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>
        #test3 { 
           
            background-image: url(./images/grad.gif); 
            background-position: left bottom; 

            width:80%; 
            margin-left:10%; 
            height:200px; 
            background-color:blue;
            
        }

    </style>

    <div id="test3"></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).

4/17/2014 8:23:14 AM
Terms Of Use | Privacy Statement | Copyright 2006-2010 © Independence Software LLP