background-position

background-position

CSS background-position Property

The CSS background-position property is used to position background images inside of HTML elements using keywords, lengths or percentages.

CSS CODE EXAMPLE

<style type="text/css">
div#myID {
    background-image: url(myBG.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    border: #09F 1px solid;
    width: 550px;
    height: 100px;
}
</style>
<div id="myID">div content ...</div>

 

div content ...

CSS CODE EXAMPLE

<style type="text/css">
div#myID {
    background-image: url(myBG.jpg);
    background-position: 10px 20px;
    background-repeat: no-repeat;
    border: #09F 1px solid;
    width: 550px;
    height: 100px;
}
</style>
<div id="myID">div content ...</div>

 

div content ...

CSS CODE EXAMPLE

<style type="text/css">
div#myID {
    background-image: url(myBG.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border: #09F 1px solid;
    width: 550px;
    height: 300px;
}
</style>
<div id="myID"></div>

 

Possible Values:

keywords
center •• top •• left •• right •• bottom •• left center •• right center
top center •• top left •• top right •• bottom center •• bottom left •• bottom right
length
A pair of numbers separated by a space. For instance using "10px 20px" will offset the background image 10px from the left and 20px from the top.
percentages
A pair of percentages separated by a space. For instance using "50% 50%" will center an image in its container.

click here to code. 

Tweet