Teljes méretű, rögzített háttérkép

Gyakran alkalmazott dizájn elem a böngésző ablakot teljesen kitöltő, annak méretéhez mindig alkalmazkodó, rögzített háttérkép.

Valahogy így:

See the Pen WzQbOw by zeon (@zeon) on CodePen.

Első lépésként keressünk egy megfelelő felbontású képet (ajánlott legalább fullHD, 1920×1080).

Készítsük elő az oldalt, háttérnek beállítva a képet, egy középre igazított hasábot, néhány (10-15) bekezdésnyi szöveget.

HTML:

<div id="container">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non unde error expedita adipisci ab ut sapiente fuga, voluptatibus quasi velit provident dolore earum nisi nihil mollitia, eaque! Sequi, repellat, nesciunt.</p>
  <p>Sit, ipsum veniam facere optio, cumque reiciendis incidunt officiis labore. Officia eos beatae eius quas soluta a nesciunt quibusdam, nobis, ab, amet nemo labore dolore iure numquam ut, delectus cumque.</p>
  <p>Repellat nisi placeat reprehenderit debitis praesentium, in consectetur cum sapiente eius assumenda, suscipit et fuga temporibus dolorum laborum libero! Repellendus esse ipsam eos accusantium, molestiae sequi optio! Neque, libero, saepe.</p>
  <p>Id tempore molestiae voluptates natus maxime sunt optio facere officia nihil corporis reiciendis provident rem sed ex similique nemo fugit autem praesentium, eaque qui nulla? Officia perferendis pariatur earum non.</p>
  <p>Magnam, quam error quia dignissimos molestias, nesciunt, quaerat ut temporibus, sapiente ad maxime suscipit eveniet necessitatibus. Nam, voluptates culpa veritatis facilis vitae accusamus doloremque nostrum exercitationem. Laudantium natus unde eaque!</p>
  <p>Hic nam saepe aspernatur possimus laudantium quisquam perspiciatis error maiores neque quaerat excepturi, eligendi illum dolor, deserunt minus suscipit voluptates repudiandae nesciunt autem unde consequatur iusto quo, cupiditate quis. Vitae!</p>
  <p>Odio iure, harum rerum ab amet. Enim accusantium consectetur, voluptatibus magni harum debitis ad minima corporis. Cupiditate doloribus beatae quod, eveniet consequuntur natus, corporis tenetur temporibus, necessitatibus vitae, veniam distinctio.</p>
  <p>Eum ex aliquam ea officia nobis dicta, minima, deserunt fugiat corporis dolorem asperiores. Distinctio maxime totam earum facilis laboriosam facere quas, eveniet nostrum incidunt blanditiis ad culpa, quia nemo ipsa.</p>
  <p>Quia excepturi quas delectus tempore, suscipit fugiat asperiores omnis facilis necessitatibus dignissimos quaerat numquam voluptas fugit dolore et sit vitae id aliquam, commodi obcaecati ea dolores at cum modi. Saepe.</p>
  <p>Officia alias, ut ipsum harum dolorum quae ullam quas omnis ducimus, aliquid consectetur rem nesciunt odit vero cupiditate voluptatem cumque aut! Perspiciatis repellat, delectus. Non numquam ducimus voluptate architecto veniam.</p>
  <p>Corporis commodi sed dolor laudantium ab quas et, optio voluptatem dolores accusantium fuga nemo repudiandae eaque sunt necessitatibus illo, porro, beatae quasi quibusdam, quod minus blanditiis. Modi amet, ipsum optio!</p>
  <p>Odit, optio minima alias porro quia cum. Sed distinctio similique aspernatur voluptate, soluta odit, praesentium ipsum mollitia reprehenderit accusantium, itaque nostrum libero expedita ea facere asperiores quasi cumque ad ut.</p>
  <p>Laboriosam, labore saepe reprehenderit voluptatum maiores. Eveniet recusandae repellat officia a eligendi quis non temporibus quasi quae iste cupiditate fugit, esse dignissimos nostrum provident eaque quam animi pariatur laboriosam iure!</p>
  <p>Qui deserunt laborum tempore alias fugiat adipisci officia. Mollitia id ducimus hic, maiores fuga nam fugiat, obcaecati voluptatem rem officia ut sunt atque nulla voluptatibus soluta excepturi at commodi! Animi.</p>
  <p>At modi tenetur, unde inventore explicabo? Numquam commodi eligendi, mollitia totam eaque esse beatae ab repellendus aliquam ut, cupiditate provident laborum quae quibusdam unde quos veniam ex, aliquid enim cum!</p>
</div>

CSS:

#container {
  max-width: 760px;
  margin: 50px auto;
  padding: 20px;
  background: black;
  color: white;
  opacity: 0.7;
}

Majd jöhet a háttérkép beállítása CSS segítségével:

body {
  background-image: url(city-wallpaper-47.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

Némi magyarázat:

• background-repeat: no-repeat;  – ne ismétlődjön a háttérkép
• background-position: center center;  – vízszintesen és függőlegesen középre igazítjuk a képet, alapértelmezés a bal-felső sarok
• background-attachment: fixed;  – rögzítjük a képet, hogy ne görgesse a tartalommal együtt (alapértelmezett a scroll  érték)
• background-size: cover;  – úgy méretezi a képet, hogy mindig lefedje az adott elemet (jelen esetben a <body> -t, azaz a teljes képernyőt), akkor is ha kicsit nyújtani vagy vágni kell a képet…

Végeredmény megtekinthető: itt