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

Examples for css background-position

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); 
            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!

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!

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