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:
Leave Comment