Quick Reach
The background-position property of CSS
The background-position property works with the background-image property of CSS. The background-position property is used to set the image starting position in the background. Besides it may also specify margins from the top, bottom etc.
See an example of background position
Syntax of CSS background position
Following is the syntax of using the background position property with its possible values:
background-position: value;
where the values can be:
- left
- right
- left center
- left top
- left bottom
- right top
- right bottom
- center top
- center bottom
etc. Note, if you specify only one value, like the left, right then the other value default would be center.
Apart from specifying left, right, top, bottom combinations, the values of CSS background-position can be specified in percentage (%) and pixels as well.
The background-position CSS property value in percentage:
background-position: 20% 80%;
where the first value, 20% is for horizontal and the other value (80%) is vertical.
For Pixels
background-position: 20px 80px;
Where the first value specifies horizontal and the second is vertical.
Note that, you must set the CSS background-attachment property as fixed for this to work in Firefox and Opera.
Example of setting CSS background image position
In this example, we will set background position of the image with right top combination by using the background position property. See the example by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<style>
/*Using CSS background*/
div
{
width:600px;
height: 500px;
background-image: url(TC_logo.png);
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>Tutorials Collection logo</div>
</body>
</html>
|
Background position example with center, center combination
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<style>
/*Using CSS background*/
div
{
width:600px;
height: 500px;
background-image: url(TC_logo.png);
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>Tutorials Collection logo</div>
</body>
</html>
|
An example with horizontal and vertical values in pixels
This example will use horizontal and vertical values in pixels specified in the background-position property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<style>
/*Using CSS background*/
div
{
width:600px;
height: 500px;
background-image: url(TC_logo.png);
background-position: 200px 10px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>Tutorials Collection logo</div>
</body>
</html>
|
Also see – CSS background
Leave A Comment?