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.


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

That the values may be a percentage or length values.


That either one or two keywords values may be providing.


I am creating a class named ClassDiv and property.

        border: 1px solid red;

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>


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

Leave Comment