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