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