In this blog I am explaining the background position using CSS3.The background-position property; as its name articulate, assent you to control the placement of the background. The following shows the syntax of the background- position property.

Syntax:

Background-position :[< percentage>|<length>] | [[top|center|bottom]||[left|center|]]
[< percentage>|<length>]

That the values may be a percentage or length values.

[[top|center|bottom]||[left|center|]]

That either one or two keywords values may be providing.

Example:

I am creating a class named ClassDiv and property.

  .ClassDiv
    {
        width:200px;
        height:200px;
        border: 1px solid red;
        background-image:url('mindstick.jpg');
        background-repeat:no-repeat
    }  

This code will written in #position{} id.

    background-position:30% 30%;
    background-position: 30px 30px;
    background-position:top left;
    background-position:top center;
    background-position:top right;
    background-position:right center;
    background-position:bottom right;
    background-position:bottom center;
    background-position:bottom left;
    background-position:left center;
    background-position:center center;

This code will written <body> </body> tag.


<div class="d" id="length1">position:30% 30%</div>
<div class="d" id="length1">position:30px 30px</div>
<div class="d" id="length1">position:top left</div>
<div class="d" id="length1">position:top center</div>
<div class="d" id="length1">position:top right</div>
<div class="d" id="length1">position:right center</div>
<div class="d" id="length1">position:bottom right</div>
<div class="d" id="length1">position:bottom center</div>
<div class="d" id="length1">position:bottom left</div>
<div class="d" id="length1">position:left center</div>
<div class="d" id="length1">position:center center</div>


Output:

  Modified On Sep-18-2014 01:24:08 PM

Leave Comment