Pastor Pixel / HTML & CSS Tipps

background-attachment

In diesem Beispiel ist der Hintergrund fixiert mit der CSS Eigenschaft background-attachment: fixed. Wenn man die Seite scrollt bleibt der Hintergrund stehen und scrollt nicht mit.

Es folgt etwas Blindtext, damit man die Seiten scrollen kann.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi est earum accusamus, aliquid ducimus laborum error rerum sint possimus officia commodi quod consectetur ipsam, hic ratione vitae corporis dolor repudiandae odit praesentium nobis aliquam culpa molestiae! Aspernatur nemo cumque, veniam nulla delectus nobis itaque facilis quos. In maxime officiis optio consectetur, ipsa reprehenderit, esse quasi, voluptas repellendus totam itaque cum ex officia nihil? Neque, similique magni maxime ullam impedit et officiis, tempora tempore quos harum incidunt cumque nam itaque animi necessitatibus repellendus mollitia excepturi fuga vero distinctio! Similique iure libero qui, quidem reprehenderit fuga a optio. Iure optio harum nulla alias totam et mollitia fuga quisquam doloribus aliquam iusto in quis laborum dolorem officia excepturi nihil tempore error, neque ea, perferendis assumenda laboriosam repudiandae! Vel impedit corporis illum ratione similique nesciunt, odit harum sunt cum nemo molestias quae officia maiores aliquam enim, quasi, odio perspiciatis. Delectus pariatur, quibusdam neque optio, beatae error? Eaque sequi mollitia ullam eius dignissimos adipisci facilis dolorum iusto nam, libero impedit dolorem illo, voluptates magnam suscipit hic consequatur natus magni, distinctio perspiciatis tenetur similique? Eum officia nesciunt optio nobis cupiditate itaque libero maiores velit alias similique aut necessitatibus soluta reiciendis assumenda, deserunt odit illo. Deserunt, sint.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eaque officiis nihil distinctio commodi cum facere, quidem enim sit, molestiae, aliquid vel et mollitia quo unde hic reprehenderit sunt praesentium esse impedit numquam vero veritatis, repellendus magnam asperiores. Cum, doloremque suscipit odit iusto placeat fugiat optio temporibus, voluptate, libero ratione similique magni non nulla! Amet, earum eaque minima similique veritatis error voluptas ipsam autem obcaecati totam ducimus omnis laboriosam accusamus voluptatum enim sequi rem est vitae consequuntur, sed natus. Pariatur consectetur at distinctio assumenda saepe facere, dolores, accusamus aperiam itaque ex. Quo asperiores facilis ex reiciendis beatae a cumque odit repudiandae tempora, cupiditate nihil quod maxime incidunt, id. Distinctio odit doloremque, similique natus commodi nulla odio doloribus ut, quis repudiandae possimus eum eos aspernatur recusandae animi ipsam, tenetur tempora blanditiis est cum sapiente laborum omnis amet. Adipisci odit, quo animi voluptas deleniti ratione libero laudantium ab, ullam, alias ipsum. Nemo placeat quae, ipsam perspiciatis tempore sed, harum atque laboriosam quaerat aliquid. Porro natus consequuntur, quis fugit delectus, veniam. Fugiat ea molestias magni praesentium itaque consectetur, dolorum iure quod, adipisci reprehenderit, possimus ipsa magnam corporis beatae neque enim iste voluptate nihil eveniet ullam. Ad quas, officia non velit explicabo commodi perferendis eius dignissimos nam soluta blanditiis fuga atque nihil sit ullam a ipsa expedita necessitatibus dolorem incidunt porro quam tempore dicta! Mollitia eaque doloremque autem et molestiae. Quo neque, quae at, reprehenderit laborum, eveniet accusamus laudantium quisquam numquam perspiciatis earum deleniti.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non earum dicta ullam quaerat hic porro, sequi! Id, necessitatibus qui explicabo minus tempore, dignissimos architecto in ipsam sint tenetur. Obcaecati corporis, doloremque tempore, saepe, excepturi similique rerum voluptatum dignissimos nobis adipisci quos? Aliquam cumque expedita obcaecati amet necessitatibus nisi vitae ducimus cupiditate itaque facilis voluptate velit commodi repellat quisquam, autem, pariatur aperiam dicta. Corrupti eaque nostrum velit aspernatur! Nisi molestiae obcaecati nostrum voluptatibus, at, iure quas magnam voluptatem? Ullam impedit autem adipisci non illum. Debitis sunt voluptatum, totam quasi dolores, animi ipsa error eum sequi minima eveniet magnam quidem sapiente, quia tempore sint iure vel fugiat commodi consequuntur aut quod distinctio ipsum repudiandae dicta? Voluptatibus eligendi illum at. Cupiditate optio officiis odio atque modi. At ducimus repudiandae provident obcaecati reprehenderit quasi magni accusantium fuga inventore libero. Eos iure nulla sint accusantium doloremque! Labore sint esse rerum quasi neque, quis veritatis placeat ad, ipsam reprehenderit! Animi autem dolor facere vel, sit adipisci ipsum a repellendus recusandae, repudiandae quaerat praesentium magni iusto ad quibusdam, officiis excepturi fugit totam nisi dicta, itaque consequatur quae dolore. Saepe iusto officiis iure eius, maiores veniam suscipit nobis consequatur tempora perferendis et adipisci accusamus impedit atque deleniti aut provident, eum rem sit aperiam molestias. Amet iusto quisquam aliquam, voluptatem. Molestias, harum, hic. Dolorum ut animi, explicabo dolorem ullam suscipit, neque, sunt quibusdam officia excepturi aliquam! Dolor amet asperiores, placeat ad exercitationem fugit dolorum illum consectetur totam quam suscipit eveniet reiciendis unde cumque qui repudiandae ratione veniam maiores minima doloremque laudantium magni quod quasi. Obcaecati voluptas distinctio adipisci suscipit, sint delectus facilis eum iusto amet quae illum doloremque eligendi nisi quo? Consequatur suscipit ullam molestias amet fugit impedit pariatur ab odit quibusdam maiores aut, maxime reiciendis minus, voluptatum deleniti excepturi consequuntur quia aspernatur delectus possimus officiis obcaecati eius. Dolorum placeat aperiam fugiat ipsum quidem, perspiciatis modi. Libero commodi tempore maiores consequatur, itaque expedita? Voluptatibus doloremque eius harum reprehenderit rem natus magnam voluptates unde amet corporis nobis officiis vel sunt deserunt, assumenda cum distinctio fugiat odio illo quod at in aperiam optio iste! Saepe molestias veritatis minus architecto, nisi alias eos nobis a totam asperiores odio ipsa dolor provident debitis corporis quos illum pariatur voluptatum explicabo illo. Veritatis in consectetur inventore vitae labore, iure harum magni quidem rem facere. Laudantium quo quisquam voluptatum, quas amet nobis dolorem excepturi, repellat fugiat veritatis quibusdam! Cum repellendus tempora inventore maiores aut corporis illo quaerat dolores quam natus, quod placeat magni vel nobis minus laudantium pariatur delectus quisquam at in ipsum aspernatur dolorem debitis eum. Iure voluptatibus, illo repellat dolore, dolorem magni eius iste perspiciatis doloribus eveniet natus quis dolores omnis assumenda animi, modi officia, fuga illum veniam adipisci. Incidunt vel consectetur voluptatibus error nihil temporibus necessitatibus blanditiis quaerat cum, non, quisquam maiores voluptate corporis quae ab dicta est, commodi, harum laborum. Praesentium quam impedit ratione natus ducimus accusantium fugit laborum reiciendis laudantium harum, iusto eum itaque numquam magnam repudiandae ea ut voluptates dignissimos debitis, eos illum molestias, sequi veniam. Quaerat sed blanditiis corporis.