h1 with background image of different position : background position « CSS « HTML / CSS






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

h1 with background image of different position

  
Positioning Backgrounds
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning Backgrounds</title>
<style type="text/css">

h1 {
font: 24px Verdana, Arial, Helvetica, sans-serif;
margin: 20px;
padding: 35px;
border: 2px solid;
}
h1.topLeft {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: top left;
}
h1.topRight {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: top right;
}
h1.centerCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: center center;
}
h1.rightCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: right center;
}
h1.bottomLeft {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
h1.bottomCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom center;
}
h1.bottomRight {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<h1>pristine &amp; clean</h1>
<h1 class="topLeft">top left</h1>
<h1 class="topRight">top right</h1>
<h1 class="centerCenter">center center</h1>
<h1 class="rightCenter">right center</h1>
<h1 class="bottomLeft">bottom left</h1>
<h1 class="bottomCenter">bottom center</h1>
<h1 class="bottomRight">bottom right</h1>
</body>
</html>








Related examples in the same category

1.The background-position Property (for fixing position of backgrounds)
2.'background-position' Example
3.background-position: 0 0
4.background-position: center
5.background-position: left
6.background-position: right
7.background-position: 0% 50%
8.background-position: left top
9.background-position: 50% 20%
10.Background position: right bottom
11.The background is positioned 40 pixels from the left and 3 ems from the top
12.background-position: center 10px
13.background-position: left center
14.background-position: bottom left
15.background-position: top center
16.background-position: top left
17.background-position: top right
18.background-position: right center
19.background-position: bottom center
20.background-position: center 100%
21.background-position: 10% 10%
22.background-position: 10px 10px
23.background-position: 10px 50%
24.background-position: 50% 10px
25.background-position: 50% center
26.background-position: 10px top
27.background-position: top 10px
28.By length and percentage
29.Background-position specifies a position by keyword.
30.Background-position specifies a position by length.
31.Background-position specifies a position by percentage.
32.background-position: center and background-repeat: repeat-y
33.background-position: center center and background-repeat: repeat-x
34.background-position: center center and background-repeat: repeat-y
35.background-position: center and background-repeat: repeat
36.background-position property: specify a position using one of three primary methods, by length, by percentage, or by keyword.
37.background-position: 60% 60%;
38.background-position: 80% 10px; (length and percentage)
39.background-position: center 100%; (percentage keyword)
40.background-position: center 10px;(length keyword)
41.background-position: 10px 10px;
42.background-position: 10% 10%;
43.background-position: top left;
44.background-position: top center;
45.background-position: top right;
46.background-position: right center;
47.background-position: bottom right;
48.background-position: bottom center;
49.background-position: bottom left;
50.background-position: left center;
51.background-position: center center
52.background-position: top 10px;
53.background-position: 10px top;
54.background-position: center 50%;
55.background-position: 50% center;
56.background-position: 50% 10px;
57.background-position: 10px 50%;
58.background-position: 10px; background-repeat: repeat; repeat-x; repeat-y;
59.background-position: center center; background-repeat: repeat; repeat-x; repeat-y;
60.background-position:center;
61.background position: 0% 50%
62.background position: left top
63.background position:top center
64.background-position: 50% 20%;
65.background-position: center;
66.Background position
67.background image position: left, right, top and bottom
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