Background Styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Background Styling</title>
<style>
/* Sets the background color to indigo */
h1 {
background-color: indigo;
color: white;
}
/* body element has been set with repeated background image*/
body {
background-image: url("/notes/examples/assets/img/backgroundImg.png");
background-repeat: no-repeat;
background-position: right bottom;
}
/* section element is set with a non-repeated background image at top-right position with fixed attachment*/
section {
background-image: url("/notes/examples/assets/img/doggy300.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
<body>
<!--
background-color : Set the backcolor of the element
background-image : property sets one or more background images for an element.
> background-repeat : repeats an image both horizontally and vertically
> background-position : specifies position of background image
> background-attachment : specifies whether background image should scroll or be fixed.
-->
<h1>Demo: Background Styling</h1>
<section>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque quaerat ullam consectetur labore voluptatum eligendi, accusantium ad dolorem! Est exercitationem eos nesciunt pariatur adipisci minima voluptatum deleniti sed rem, recusandae harum doloremque sit, ipsam iste aliquam debitis animi tempora perspiciatis. Molestiae temporibus cupiditate neque cumque autem incidunt accusamus sint, quas labore sed earum eum? Quisquam voluptates veritatis reiciendis minus, exercitationem iusto adipisci quidem beatae nostrum eligendi dignissimos impedit? Ducimus praesentium eius quae in nesciunt asperiores voluptatum, dignissimos rerum ut incidunt eaque nisi quidem tenetur explicabo maiores quam harum minima alias sed error temporibus? Possimus aut iusto accusamus blanditiis distinctio cumque quidem molestias optio aperiam nesciunt pariatur ullam quis recusandae, amet error, sed perferendis quod? Perspiciatis aperiam placeat sed error dolor, dolorum eius aut amet consequatur illum corporis dolorem cupiditate reiciendis, velit ducimus magni. Doloribus labore quia quis pariatur cupiditate! Velit tempora dolore dolor temporibus vero, adipisci inventore incidunt vel pariatur nesciunt ducimus sint maiores obcaecati similique quo, ex dicta saepe nihil tenetur maxime. Maxime natus vero animi, est cupiditate voluptates voluptatem repellendus! Quam necessitatibus maiores alias asperiores, fugiat eaque accusamus atque odio nulla, ipsum quidem quo animi quaerat, dolor dolorem minus sapiente quibusdam. Magni voluptatem neque vero modi natus sapiente?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident tenetur porro sequi, distinctio deleniti fugiat reprehenderit id commodi nemo sint cum expedita dolorum doloribus autem laborum officia non minima ipsam error minus repellendus ducimus! Ipsa, illum provident? Nostrum possimus rerum, cumque dicta minus deleniti neque veritatis assumenda quasi, nihil dolorum aliquam. Dolore explicabo, neque quasi rem eum quod quae. Veritatis error quaerat molestias quos? Sunt totam nam rem quidem doloremque, officia fugit porro! Expedita et ratione numquam facilis aperiam, nemo eum dolore corporis, iure debitis nulla quasi fugiat commodi maxime cupiditate error a aliquid in sequi ab voluptatum sit velit explicabo. Labore ipsum rem architecto aliquid minima? Expedita quo in consequatur consectetur ea debitis, inventore id praesentium molestiae itaque adipisci beatae officiis fuga dolores harum possimus, ipsam dolore maxime enim eaque perspiciatis iure. Nesciunt quidem ducimus iste quae praesentium, impedit labore earum, libero neque expedita voluptate excepturi a non ipsam perspiciatis nostrum autem quo iusto velit. Tenetur eos, et corrupti libero quod atque omnis natus provident beatae dolores porro voluptatum illo, possimus cupiditate cumque est dicta expedita magni voluptate repellat. Reiciendis, obcaecati beatae at velit modi praesentium reprehenderit! Debitis, a! Vero, temporibus ut explicabo reprehenderit autem nihil unde iure ipsa repellendus nam consectetur aliquid, dolores corrupti perferendis quo voluptates minima! Porro assumenda quibusdam perferendis quam nemo nesciunt earum iusto fugit optio ad iste provident sapiente illum ullam delectus voluptatem eum nulla harum, laboriosam reiciendis expedita nostrum obcaecati? Atque reiciendis optio cupiditate suscipit illo nulla quaerat deserunt repudiandae amet ratione a quam dolorum numquam illum, dicta quasi sit error magnam, quibusdam molestiae quos impedit? Eum optio harum nam, et commodi inventore ut repudiandae temporibus, natus illo cum quas tempore? Dolorem totam error soluta, cumque nisi consequatur repellendus ad, delectus inventore modi voluptas officiis, eos consequuntur doloribus sunt vitae beatae? Distinctio, quibusdam?</p>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident tenetur porro sequi, distinctio deleniti fugiat reprehenderit id commodi nemo sint cum expedita dolorum doloribus autem laborum officia non minima ipsam error minus repellendus ducimus! Ipsa, illum provident? Nostrum possimus rerum, cumque dicta minus deleniti neque veritatis assumenda quasi, nihil dolorum aliquam. Dolore explicabo, neque quasi rem eum quod quae. Veritatis error quaerat molestias quos? Sunt totam nam rem quidem doloremque, officia fugit porro! Expedita et ratione numquam facilis aperiam, nemo eum dolore corporis, iure debitis nulla quasi fugiat commodi maxime cupiditate error a aliquid in sequi ab voluptatum sit velit explicabo. Labore ipsum rem architecto aliquid minima? Expedita quo in consequatur consectetur ea debitis, inventore id praesentium molestiae itaque adipisci beatae officiis fuga dolores harum possimus, ipsam dolore maxime enim eaque perspiciatis iure. Nesciunt quidem ducimus iste quae praesentium, impedit labore earum, libero neque expedita voluptate excepturi a non ipsam perspiciatis nostrum autem quo iusto velit. Tenetur eos, et corrupti libero quod atque omnis natus provident beatae dolores porro voluptatum illo, possimus cupiditate cumque est dicta expedita magni voluptate repellat. Reiciendis, obcaecati beatae at velit modi praesentium reprehenderit! Debitis, a! Vero, temporibus ut explicabo reprehenderit autem nihil unde iure ipsa repellendus nam consectetur aliquid, dolores corrupti perferendis quo voluptates minima! Porro assumenda quibusdam perferendis quam nemo nesciunt earum iusto fugit optio ad iste provident sapiente illum ullam delectus voluptatem eum nulla harum, laboriosam reiciendis expedita nostrum obcaecati? Atque reiciendis optio cupiditate suscipit illo nulla quaerat deserunt repudiandae amet ratione a quam dolorum numquam illum, dicta quasi sit error magnam, quibusdam molestiae quos impedit? Eum optio harum nam, et commodi inventore ut repudiandae temporibus, natus illo cum quas tempore? Dolorem totam error soluta, cumque nisi consequatur repellendus ad, delectus inventore modi voluptas officiis, eos consequuntur doloribus sunt vitae beatae? Distinctio, quibusdam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi commodi repudiandae voluptatum perspiciatis at vero non reiciendis repellat corrupti accusantium possimus nulla cupiditate, ipsum eum maiores quia modi quae numquam est libero aut voluptas animi molestias! Repudiandae distinctio in debitis quam saepe voluptates ipsum nemo placeat quo quia ullam impedit, aliquam nobis enim ab cumque pariatur nihil at aperiam quaerat dicta? Distinctio inventore adipisci blanditiis ipsam ipsum iure a ut quis recusandae quibusdam fugiat nulla sapiente, excepturi odit iusto minus error optio aliquid nemo pariatur nesciunt sed explicabo! Veritatis, quisquam recusandae voluptates molestias placeat non commodi beatae optio vitae repudiandae laborum fugiat explicabo nam distinctio facilis laudantium possimus voluptatem id! Iusto esse quae nulla est reiciendis. Maiores exercitationem veritatis autem commodi minima est saepe. Dolorem unde dignissimos eligendi, labore debitis numquam ut a fugit praesentium! Corporis hic quasi obcaecati placeat exercitationem, eaque magni facilis impedit iste veniam amet sit? Delectus dignissimos reiciendis quibusdam ad tenetur illo perferendis nihil natus. Ullam ratione minima ad! Velit eius autem architecto animi fugiat quod odit incidunt iusto, tempore modi. Nostrum nemo quos, praesentium, perspiciatis modi dolorum tenetur tempora voluptatum sequi, delectus architecto amet eum alias reiciendis ipsa illum ullam natus voluptatibus repudiandae! Voluptas, dolore?</p>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident tenetur porro sequi, distinctio deleniti fugiat reprehenderit id commodi nemo sint cum expedita dolorum doloribus autem laborum officia non minima ipsam error minus repellendus ducimus! Ipsa, illum provident? Nostrum possimus rerum, cumque dicta minus deleniti neque veritatis assumenda quasi, nihil dolorum aliquam. Dolore explicabo, neque quasi rem eum quod quae. Veritatis error quaerat molestias quos? Sunt totam nam rem quidem doloremque, officia fugit porro! Expedita et ratione numquam facilis aperiam, nemo eum dolore corporis, iure debitis nulla quasi fugiat commodi maxime cupiditate error a aliquid in sequi ab voluptatum sit velit explicabo. Labore ipsum rem architecto aliquid minima? Expedita quo in consequatur consectetur ea debitis, inventore id praesentium molestiae itaque adipisci beatae officiis fuga dolores harum possimus, ipsam dolore maxime enim eaque perspiciatis iure. Nesciunt quidem ducimus iste quae praesentium, impedit labore earum, libero neque expedita voluptate excepturi a non ipsam perspiciatis nostrum autem quo iusto velit. Tenetur eos, et corrupti libero quod atque omnis natus provident beatae dolores porro voluptatum illo, possimus cupiditate cumque est dicta expedita magni voluptate repellat. Reiciendis, obcaecati beatae at velit modi praesentium reprehenderit! Debitis, a! Vero, temporibus ut explicabo reprehenderit autem nihil unde iure ipsa repellendus nam consectetur aliquid, dolores corrupti perferendis quo voluptates minima! Porro assumenda quibusdam perferendis quam nemo nesciunt earum iusto fugit optio ad iste provident sapiente illum ullam delectus voluptatem eum nulla harum, laboriosam reiciendis expedita nostrum obcaecati? Atque reiciendis optio cupiditate suscipit illo nulla quaerat deserunt repudiandae amet ratione a quam dolorum numquam illum, dicta quasi sit error magnam, quibusdam molestiae quos impedit? Eum optio harum nam, et commodi inventore ut repudiandae temporibus, natus illo cum quas tempore? Dolorem totam error soluta, cumque nisi consequatur repellendus ad, delectus inventore modi voluptas officiis, eos consequuntur doloribus sunt vitae beatae? Distinctio, quibusdam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi commodi repudiandae voluptatum perspiciatis at vero non reiciendis repellat corrupti accusantium possimus nulla cupiditate, ipsum eum maiores quia modi quae numquam est libero aut voluptas animi molestias! Repudiandae distinctio in debitis quam saepe voluptates ipsum nemo placeat quo quia ullam impedit, aliquam nobis enim ab cumque pariatur nihil at aperiam quaerat dicta? Distinctio inventore adipisci blanditiis ipsam ipsum iure a ut quis recusandae quibusdam fugiat nulla sapiente, excepturi odit iusto minus error optio aliquid nemo pariatur nesciunt sed explicabo! Veritatis, quisquam recusandae voluptates molestias placeat non commodi beatae optio vitae repudiandae laborum fugiat explicabo nam distinctio facilis laudantium possimus voluptatem id! Iusto esse quae nulla est reiciendis. Maiores exercitationem veritatis autem commodi minima est saepe. Dolorem unde dignissimos eligendi, labore debitis numquam ut a fugit praesentium! Corporis hic quasi obcaecati placeat exercitationem, eaque magni facilis impedit iste veniam amet sit? Delectus dignissimos reiciendis quibusdam ad tenetur illo perferendis nihil natus. Ullam ratione minima ad! Velit eius autem architecto animi fugiat quod odit incidunt iusto, tempore modi. Nostrum nemo quos, praesentium, perspiciatis modi dolorum tenetur tempora voluptatum sequi, delectus architecto amet eum alias reiciendis ipsa illum ullam natus voluptatibus repudiandae! Voluptas, dolore?</p>
</section>
</body>
</html>