'background-position' Example : background position « CSS « HTML / CSS






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

'background-position' Example

  
    
<html>
<head>
</head>
<body>
<div style="background:blue url(http://www.java2s.com/style/logo.png) repeat top left; 
            width:200; 
            border:3; 
            height:150; 
            font-size:14">
            
            text in first div element.
            </div>
            <br><br><br><br><br><br><br><br><br>
<div style="background-color:red; 
            background-attachment:fixed; 
            background-image:url(http://www.java2s.com/style/logo.png); 
            background-repeat:repeat; 
            background-position-x:top; 
            background-position-y:right; 
            width:200; 
            border:3; 
            height:150; 
            font-size:14">
            
            background-position-x is set to top. <br>
            background-position-y is set to right. 
            
            </div>
</body>
</html>








Related examples in the same category

1.The background-position Property (for fixing position of backgrounds)
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