Css background position property

Hi friends in this post I am sharing about css background position property .As I have already made a tutorial on css background image property and this post helps to align an image right ,left and center.This post looks very simple but as a complete newbie in coding  css, definitely a useful tutorial because each code was explained with diagram .Kindly note that you should specify the location of the image correctly in your system.

In the below codes left,center and right denotes background-attachments  and top,center,bottom denotes background-position

 

 

css background position

Background Position left and top

<style>
.pqr {
    background-image: url("image file path");
   background-repeat: no-repeat;
   background-position: left top;
}
</style>
<body class= "pqr">
</body>

Output will be

 

background position left top

 

Background Position left and top

<style>
.pqr {
    background-image: url("file:///D:/desk/authorcopy.png");
   background-repeat: no-repeat;
   background-position: left center;
}
</style>
<body class= "pqr">
</body>

 

 

 

background position left and top

Background Position left and bottom

 

 

<style>
.pqr {
    background-image: url("file:///D:/desk/authorcopy.png");
   background-repeat: no-repeat;
   background-position: left bottom;
}
</style>
<body class= "pqr">
</body>

 

 

 

background position left and bottom

 

 

 

Background position right and top

 

<style>
.pqr {
    background-image: url("file:///D:/desk/authorcopy.png");
   background-repeat: no-repeat;
   background-position: right top;
}
</style>
<body class= "pqr">
</body>

 

 

 

background position right and top

 

Background position right and center

<style>
.pqr {
    background-image: url("file:///D:/desk/authorcopy.png");
   background-repeat: no-repeat;
   background-position: right center;
}
</style>
<body class= "pqr">
</body>

 

background position right and center

 

Background position right and bottom

<style>
.pqr {
    background-image: url("file:///D:/desk/authorcopy.png");
   background-repeat: no-repeat;
   background-position: right bottom;
}
</style>
<body class= "pqr">
</body>

 

background position right and bottom

 

Similarly you can try it for center top , center center ,center bottom.

Print Friendly and PDF
SHARE

About me

Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment