CSS background-position property

In this chapter you will learn:
About background-position property
Values of background-position
Example of background-position

CSS background-position property is the derived property of background which is used to change the position of the background image. As we know that we can set images in left, right, top, bottom, and center of the web page so this property is used to set the position of the background image. According to the requirement of the web page, we need to set the background image in different positions so in that case or condition this property provides facility to accomplish this task. Sometimes it takes two values in which the first value indicates horizontal and second value shows verticle.

Values of background-position:-
left
right
center
top
buttom
left center
right center
right top
left top
center top
left bottom
right bottom
center bottom
center center
50% 50%
25% 75%
10px 200px
50px 50px
initial

Example of background-position
<html>
<head>
<style type="text/css">
body
{
background-image:url("rose.jpg");
background-repeat: no-repeat;
background-position:left;
 
}
</style>
</head>
<body>
This is the example of background-position left.
</body>
</html>

Guide:-

If you will write the given code in an editor like notepad, dream viewer and run it then you will get that the given background image is set to the position left of the web page.

Output:- image of background-image property

Summary

In this chapter you have learned about the background-position property so now you can use this property in your web pages. Try it yourself and click on Next button to continue-

 

Share your thought