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
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 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 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 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 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 bottom
<style>
.pqr {
background-image: url("file:///D:/desk/authorcopy.png");
background-repeat: no-repeat;
background-position: right bottom;
}
</style>
<body class= "pqr">
</body>
Similarly you can try it for center top , center center ,center bottom.
Hi. I am interested in blogging.And sometimes play with webdesign,web development,domain sale,designing logo and more.
0 comments :
Post a Comment