background-position: center; : background position « CSS « HTML / CSS






background-position: center;

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta name="generator" content="HTML Tidy for Mac OS X (vers 1st December 2004), see www.w3.org" />

  <title></title>
<style type="text/css">

h1, h2, h3 {
 font-size: 200%;
 background-image: url(bkgd2.jpg);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 padding: 1.5em;
 text-align: center;
 color: white;
}
p {
 text-align: justify;
}

</style>
</head>

<body>
  <h1>Lorem ipsum in eam quodsi</h1>

  <p>Principes consetetur, eam an inimicus definiebas vituperata. Suas facer noster mel at, cum mazim consul aeterno at. Duo nihil tamquam commune ea, integre nostrud mentitum cu eos. Ullum menandri id ius, pericula definiebas vim ei, eos debet patrioque moderatius at. Id sea commune ancillae delicatissimi, his cu illum nominavi, est id mollis delicata.</p>

  <p>Dolorem maiorum has in, ex his admodum urbanitas. Ei vis tantas mollis, est utamur nominavi accommodare ne. Fierent eleifend at mel. Qui no falli dolore officiis. His vidit quodsi te, quem noster ad ius, tantas persius an qui.</p>

  <p>Forensibus mediocritatem te ius. Sit possit oblique scribentur cu, malis denique ei his. Est ad placerat maluisset argumentum. Dicta dissentiet id est, quo ipsum falli gloriatur ut. Probo tantas sea ex, quo id summo iracundia, his te nominavi facilisis.</p>

  <p>Omnium oblique scripserit quo ex. Mea ut consulatu dissentias, odio tritani placerat sed ei, eam audire vidisse vivendum ex. Ei duo kasd graecis mentitum. Expetendis reprimique ea eum, mea porro instructior definitionem et.</p>

  <p>Illud nusquam eos te, sed malorum discere quaerendum no, no sit mazim everti. Postea maiorum deterruisset mel ei, eos ex vide tibique. Qui modo ullum ad, in qui nostrud phaedrum. Illum ceteros ut nec, has et eros facer, no usu elit volutpat hendrerit.</p>

  <p>Ea dolor putant facilisi pro, ex qui quem nostrud assueverit. His ad mundi docendi, amet senserit eum an. Vel id sint vidit liberavisse. Id saperet noluisse mel, et fierent detracto praesent usu. Virtute scaevola eam et, per in quodsi recteque mediocrem. Dicant assueverit necessitatibus ad ius.</p>

  <p>Ubique viderer deleniti at est, cum eu erat tritani fabulas. Solet quando deterruisset no nam, et usu munere consetetur. Mutat tempor ponderum ad sed, vix ne eirmod numquam nonummy. Sumo hinc eos ex, in nec percipit vulputate. In nec malorum accusamus, cibo ignota malorum ex est, vim dicat dicunt eu. Soleat everti facilisis at mea, nec ad ullum dicit posidonium.</p>

  <p>Ea constituto constituam liberavisse vix, ne prima oporteat sapientem eum. Ei sea ipsum consul malorum, quo an natum paulo aliquip. Ea qui oratio ubique. Paulo reformidans eu vel, ponderum rationibus cu vix.</p>

  <p>Per ad tollit everti. Vide ornatus minimum vix ne, cu pri meis assueverit. Eos ne nullam discere euismod, molestiae percipitur per in. Eu prima nullam vivendum sea, ad vis aeque hendrerit. Erat dolor eum at, sit ei debitis iudicabit laboramus. Cu vis indoctum salutandi.</p>

  <p>Nec at soluta insolens. Ei eam novum mentitum accommodare, quo aliquyam efficiantur an. Per et soleat fastidii probatus, at vis mollis adipisci recusabo. Ea vim mucius utroque deleniti, et solet luptatum delicata sed, ea sed dicunt constituto dissentias. Ignota omnium maluisset no his. Ipsum recteque at sea.</p>

  <p>Sit ut errem essent. Vim at magna laoreet deserunt, sit ad everti salutandi expetenda. Mei et nulla veniam tibique, nam vocent consulatu ex. Sed at timeam facilisi insolens, putent deterruisset an pri. Sea modo nostro necessitatibus cu. Sea te audiam phaedrum maluisset, ne tempor vocibus quaerendum est.</p>

  <p>Sit cu mazim mucius fierent, ad dissentias necessitatibus quo. No sea dicant eleifend suavitate. Cu sit dolor consequat, modo propriae per an. Id ubique oportere convenire vim. Id assum assentior sententiae vix, vel ei lucilius ocurreret.</p>

  <p>Democritum rationibus ius te, et vim doming ceteros. Sea cu wisi placerat menandri, pro integre molestie eu. Mei et commune adolescens argumentum. Modo vocibus comprehensam eos cu. Mel falli consul patrioque cu. His delenit mentitum conceptam no, summo munere essent eu usu. Ex pri augue dolore habemus, in maiestatis consectetuer vel.</p>
</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
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