The background-position Property (for fixing position of backgrounds) : background position « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. background position

The background-position Property (for fixing position of backgrounds)

   

Value      Meaning

x% y%      Percentages along the x (horizontal) and y (vertical) axis.

x y        Absolute lengths along the x (horizontal) and y (vertical) axis.

left       Show to the left of the page or containing element.

center     Show to the center of the page or containing element.

right      Show to the right of the page or containing element.

top        Shown at the top of the page or containing element.

center     Shown at the center of the page or containing element.

bottom     Shown at the bottom of the page or containing element.








Related examples in the same category

1.'background-position' Example
2.background-position: 0 0
3.background-position: center
4.background-position: left
5.background-position: right
6.background-position: 0% 50%
7.background-position: left top
8.background-position: 50% 20%
9.Background position: right bottom
10.The background is positioned 40 pixels from the left and 3 ems from the top
11.background-position: center 10px
12.background-position: left center
13.background-position: bottom left
14.background-position: top center
15.background-position: top left
16.background-position: top right
17.background-position: right center
18.background-position: bottom center
19.background-position: center 100%
20.background-position: 10% 10%
21.background-position: 10px 10px
22.background-position: 10px 50%
23.background-position: 50% 10px
24.background-position: 50% center
25.background-position: 10px top
26.background-position: top 10px
27.By length and percentage
28.Background-position specifies a position by keyword.
29.Background-position specifies a position by length.
30.Background-position specifies a position by percentage.
31.background-position: center and background-repeat: repeat-y
32.background-position: center center and background-repeat: repeat-x
33.background-position: center center and background-repeat: repeat-y
34.background-position: center and background-repeat: repeat
35.background-position property: specify a position using one of three primary methods, by length, by percentage, or by keyword.
36.background-position: 60% 60%;
37.background-position: 80% 10px; (length and percentage)
38.background-position: center 100%; (percentage keyword)
39.background-position: center 10px;(length keyword)
40.background-position: 10px 10px;
41.background-position: 10% 10%;
42.background-position: top left;
43.background-position: top center;
44.background-position: top right;
45.background-position: right center;
46.background-position: bottom right;
47.background-position: bottom center;
48.background-position: bottom left;
49.background-position: left center;
50.background-position: center center
51.background-position: top 10px;
52.background-position: 10px top;
53.background-position: center 50%;
54.background-position: 50% center;
55.background-position: 50% 10px;
56.background-position: 10px 50%;
57.background-position: 10px; background-repeat: repeat; repeat-x; repeat-y;
58.background-position: center center; background-repeat: repeat; repeat-x; repeat-y;
59.background-position:center;
60.background position: 0% 50%
61.background position: left top
62.background position:top center
63.background-position: 50% 20%;
64.background-position: center;
65.Background position
66.background image position: left, right, top and bottom
67.h1 with background image of different position
68.Use image as background with background-position: center bottom
69.Use image as background with background-position: right bottom
70.Background images repeat in both directions by default
71.Set background-position: bottom;
72.control different background image position: center, top center, 40% 24px, 60% 24px
73.set background position to center
74.Set background-position to -125px 75px
75.background position: top right
76.The background repeats horizontally along the x-axis
77.The background repeats vertically along the y-axis