Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/background.html

Created October 9, 2025 20:48
Show Gist options
  • Save prof3ssorSt3v3/0840591a2d16cdf3b0934c5c06b74a31 to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/0840591a2d16cdf3b0934c5c06b74a31 to your computer and use it in GitHub Desktop.
Download ZIP
Starter code for mad9013 6.2
Raw
background.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Backgrounds</title>
<style>
body {
font-size: 20px;
font-family: sans-serif;
}
header,
main {
padding: 1rem 2rem;
}
p {
padding: 1rem;
margin: 1rem;
border: 1px solid #333;
}
p:nth-of-type(1) {
background-image: url('https://picsum.photos/id/161/1200/300');
/* background-clip: content-box; */
background-clip: text;
color: transparent;
font-weight: 900;
}
p:nth-of-type(2) {
}
p:nth-of-type(3) {
}
</style>
</head>
<body>
<header>
<h1>CSS Backgrounds</h1>
</header>
<main>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, consequatur. Temporibus debitis consequuntur maxime voluptates recusandae alias distinctio eaque ab porro cupiditate animi
assumenda iusto tempore cumque labore facere, reiciendis iste voluptas hic omnis fuga architecto! Unde earum soluta consequuntur quaerat recusandae maiores eos voluptatem, nulla autem
excepturi pariatur sed placeat obcaecati ducimus, iusto corrupti asperiores ipsum! Consectetur doloribus aperiam ullam voluptatibus excepturi quisquam non architecto consequuntur ab
repellendus nulla unde fugiat possimus sint, in libero ex a nobis officiis voluptate quia voluptas, obcaecati maiores accusamus. Nostrum exercitationem cupiditate recusandae, ipsam voluptatum
placeat quaerat magnam praesentium cumque vitae fugit facilis.
</p>
<p>
Illum dolor, aut earum natus commodi quisquam nihil laborum temporibus architecto vero dolore neque possimus nam eum, labore cupiditate nesciunt tempore pariatur deserunt, id quos sunt.
Ratione mollitia odio magni tempora voluptatibus deserunt, amet, fuga autem nisi hic dolorum rem possimus, optio excepturi eaque saepe omnis architecto cupiditate aut ab consectetur quam
inventore! Hic, quibusdam quo? Eos corrupti ad sapiente! Repellat fugiat iusto fugit illo laborum adipisci animi totam iure, suscipit ipsam nihil esse magni ex et aspernatur, assumenda minima
quis recusandae eaque sed alias ipsa unde. Explicabo possimus autem totam iure harum, repudiandae corrupti necessitatibus asperiores officiis. Nisi, ullam.
</p>
<p>
Optio sequi voluptates neque tempore doloribus facilis quas enim assumenda, dolor nemo pariatur nihil earum illum dolores eius nostrum ab perspiciatis iure alias eos? Quos perferendis id
nostrum voluptatem quasi architecto debitis perspiciatis voluptatibus pariatur. Quae explicabo est nihil fuga nobis amet minus iste blanditiis inventore, fugiat doloribus velit consequatur quo
nisi cupiditate eligendi laborum reprehenderit sapiente magnam modi voluptatem voluptates? Voluptatum dolor ipsa ea placeat, labore quasi quaerat ab, quia tempora fugiat saepe voluptate ex
aperiam nemo consequuntur incidunt. Saepe nobis corporis corrupti labore necessitatibus cumque quod. Dolores consequuntur consectetur hic fuga in quasi expedita, ad omnis eligendi et?
</p>
</main>
</body>
</html>
Raw
float.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Float and Clear</title>
<style>
body {
font-size: 20px;
font-family: sans-serif;
}
main {
max-width: 60em;
}
main p {
font-size: 1rem;
}
p > img {
vertical-align: middle;
}
.left {
}
.right {
}
.clearfix {
}
</style>
</head>
<body>
<header>
<h1>CSS Float and Clear</h1>
</header>
<main>
<p>
<img src="https://picsum.photos/300/300" alt="Sample Image" />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque minima voluptatum optio nihil! Nobis quaerat aperiam voluptas quisquam, earum maiores odit perferendis doloribus tenetur
similique! Officia expedita ducimus provident ratione est atque alias illo impedit, quos quas distinctio quam dolorum dolor eveniet vitae dolores minima itaque dolorem ex obcaecati aliquid?
</p>
<p>
<img src="https://picsum.photos/300/300" alt="Sample Image" />
Reiciendis, neque accusantium, minima in corporis quibusdam perspiciatis expedita ducimus fugit rerum, cum libero sed animi dignissimos assumenda officia voluptas. Mollitia eligendi soluta
itaque magni excepturi sunt rerum amet, voluptatibus ad, aut iusto eius velit odio animi corrupti cupiditate veritatis natus repudiandae obcaecati non earum illo in. Perferendis, quas. Esse.
Reiciendis, neque accusantium, minima in corporis quibusdam perspiciatis expedita ducimus fugit rerum, cum libero sed animi dignissimos assumenda officia voluptas. Mollitia eligendi soluta
itaque magni excepturi sunt rerum amet, voluptatibus ad, aut iusto eius velit odio animi corrupti cupiditate veritatis natus repudiandae obcaecati non earum illo in. Perferendis, quas. Esse.
</p>
<p>
<img src="https://picsum.photos/300/300" alt="Sample Image" />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quia tempore obcaecati ex quibusdam, quas numquam quasi incidunt veniam rerum deserunt, quam provident tempora? Dolores nesciunt
temporibus consectetur labore? Sint earum eligendi vero, placeat adipisci in provident repellat dignissimos! Voluptates, id laboriosam cumque inventore unde cupiditate? Sapiente distinctio cum
reiciendis perferendis iste fuga ad natus repellendus cumque quae recusandae voluptas beatae impedit nihil, quis minus dolor voluptatibus explicabo facilis veritatis? Sunt eos in ullam
laudantium quibusdam enim vero unde? Quaerat harum tenetur ab accusamus eaque animi dolore maxime quae. Veritatis, voluptatum ad, in quia eos odio ipsa maiores dolorum quaerat omnis nobis
doloribus placeat fuga animi corrupti non dolorem. Officia tenetur voluptate quae dignissimos fuga excepturi? Quos, voluptatibus quisquam harum ex itaque, ipsa explicabo aspernatur ullam
deleniti repellat mollitia debitis eligendi ea, laboriosam alias molestias quae praesentium dolorum? Dolorum deleniti pariatur, adipisci, doloribus nostrum possimus eaque, porro vero libero
esse odit vitae. Assumenda, alias? Soluta provident deserunt, nulla nesciunt nisi quaerat minima. Aliquam perferendis nemo sequi, dignissimos, ab a provident perspiciatis, laborum rem minima
eaque iure? Deserunt, impedit ratione omnis perspiciatis quia sapiente maiores molestiae? Soluta delectus atque veniam voluptatem debitis rerum tenetur non eius consectetur ut architecto,
neque officiis.
</p>
<p>
<img src="https://picsum.photos/300/300" alt="Sample Image" />
Sapiente maiores expedita esse. Vitae, quam corporis dignissimos mollitia autem facere assumenda incidunt accusantium sit necessitatibus quisquam totam eaque cum deleniti maiores cupiditate id
dicta! Facere vitae quidem, recusandae dignissimos ipsam vel beatae alias. Placeat at ad quas nulla suscipit ab quo cupiditate, quod quis, sit repellendus aut labore aperiam. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Reiciendis similique quaerat ipsam corrupti commodi! Similique minus ex sit sapiente nostrum nemo nihil ea laudantium. Nobis, enim aliquam, dolorum id
tenetur assumenda quibusdam necessitatibus cupiditate fugiat nulla neque ipsa ullam provident quam nemo minus suscipit quaerat quasi rerum expedita! Voluptatibus, debitis.
</p>
</main>
</body>
</html>
Raw
object-fit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Object-Fit</title>
<meta name="viewport" content="width=device-width" />
<style>
.wrap {
display: flex;
/* align-items: flex-start;
justify-content: center; */
overflow: hidden;
width: 150px;
height: 100px;
padding: 0;
margin: 1rem;
background-color: azure;
border: 2px solid red;
}
.big {
width: 500px;
height: 200px;
}
.wrap > img,
.wrap > video {
object-fit: none;
/* object-position: right bottom; */
/*
object-fit: none; - keep aspect ratio and original size, can spill out
object-fit: fill; - stretch, changes aspect ratio, keeps own largest
object-fit: cover; - keep aspect ratio fills beyond edges, smallest dimension is grown or shrunk
object-fit: contain; - shrink, keep aspect ratio
*/
}
p {
margin: 1rem;
}
p > img {
/* width: 400px; */
/* width: 300px;
aspect-ratio: 4/3; */
/* no height so keep the aspect ratio */
}
</style>
</head>
<body>
<header>
<h1>CSS Object Fit and aspect-ratio</h1>
</header>
<main>
<div class="wrap">
<img src="https://picsum.photos/id/161/800/600" alt="800 x 600 sample image" />
</div>
<div class="wrap big">
<img src="https://picsum.photos/id/161/800/600" alt="800 x 600 sample image" />
</div>
<p><img src="https://picsum.photos/id/161/800/600" alt="800x600" /> - original image.</p>
</main>
</body>
</html>
Raw
position.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Position</title>
<style>
:root {
--blue: hsl(180, 40%, 80%);
--green: hsl(90, 40%, 80%);
--orange: hsl(45, 40%, 80%);
--purple: hsl(270, 40%, 80%);
--red: hsl(0, 40%, 80%);
--fs-med: 1.2rem;
--ff: sans-serif;
}
main {
border: 5px dashed #ddd;
padding: 1rem;
}
.box {
border: 2px dashed #999;
padding: 1rem;
margin-block: 1rem;
font-size: var(--fs-med);
font-family: var(--ff);
}
.box:nth-of-type(1) {
background-color: var(--blue);
}
.box:nth-of-type(2) {
background-color: var(--green);
}
.box:nth-of-type(3) {
background-color: var(--purple);
}
.box:nth-of-type(4) {
background-color: var(--orange);
}
.box:nth-of-type(5) {
background-color: var(--red);
}
</style>
</head>
<body>
<header>
<h1>CSS Position</h1>
<h2>static, absolute, relative, fixed, sticky</h2>
</header>
<main>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci rem nesciunt repellat hic optio voluptates fugiat dolore iure quos eveniet nobis voluptatem temporibus, eius autem possimus
animi, sunt mollitia minus eligendi dignissimos consequatur, consectetur aperiam? Laudantium quam nobis ratione non labore incidunt quos ipsum dolores sequi error. Eveniet inventore rerum,
doloremque libero asperiores necessitatibus error unde soluta debitis. Tenetur incidunt debitis ut, reiciendis autem accusamus est ex sit nam nobis enim repellendus aut illo hic quia ea eum
architecto repellat vero harum esse ducimus! Nemo asperiores sapiente labore odit quis minima! Molestiae, cum quidem? Maxime dicta id dolore aliquid porro?
</p>
</div>
<div class="box">
<p>
Fugit quisquam non nam consequatur voluptatibus ullam quia maxime eveniet dolorum veniam maiores quod ducimus omnis itaque autem adipisci rem hic, quidem dolores labore repellat. Quo,
voluptate eius. Impedit doloribus harum laborum soluta. Esse totam sunt repudiandae! Numquam, consectetur ex. Exercitationem culpa libero nam sit velit. Dicta incidunt excepturi iste
dignissimos. At, voluptas esse, enim mollitia commodi perspiciatis itaque beatae ut consectetur nesciunt cupiditate maiores officiis. Quam et voluptas illum cum quae, rerum nostrum nisi
dolores explicabo autem quidem officia sed eos iure delectus, non tenetur sapiente quaerat sequi beatae cupiditate. Excepturi rem ducimus, sint sapiente culpa corporis asperiores quis.
</p>
</div>
<div class="box">
<p>
Voluptate, repellendus eaque! Modi iure accusamus reprehenderit porro rem incidunt? Delectus veniam reiciendis doloribus, culpa, molestiae molestias necessitatibus illo ex quo sapiente
expedita. Mollitia molestiae incidunt, qui recusandae repudiandae sed! Vero, cupiditate, sequi asperiores architecto nostrum provident voluptatem voluptate dolore magnam non nesciunt beatae
molestias. Fugit, consequuntur quam vel excepturi ullam dicta veniam ducimus optio, harum ab recusandae quia cum nemo numquam culpa! Impedit ullam quidem, laudantium vero aliquam eaque
reprehenderit asperiores minus consectetur molestias similique ex dolores libero id perferendis facere autem magni maxime odit. In numquam voluptate quam, quaerat, iusto iste recusandae
sequi sed facilis porro tenetur harum.
</p>
</div>
<div class="box">
<p>
Adipisci alias cupiditate nulla modi sit? Dolorem dolor incidunt deserunt aspernatur omnis quia culpa iure harum vitae eveniet, consequatur repellat obcaecati quod alias, ducimus nulla
dolorum doloremque sapiente hic a dicta? Fuga, eum blanditiis optio reprehenderit ipsa nisi soluta officia repudiandae deleniti cum corporis cupiditate? Autem magni doloribus velit
molestias. Debitis unde recusandae voluptates, quisquam totam magnam accusantium alias, iusto nam quis dignissimos suscipit. Nisi aperiam eligendi sunt earum blanditiis, nesciunt veritatis,
laboriosam quis vitae veniam numquam optio eum aliquid distinctio et asperiores voluptatem amet nemo, reprehenderit voluptate vero? Accusantium consectetur commodi possimus quidem soluta
aliquid porro nobis. Rem, pariatur.
</p>
</div>
<div class="box">
<p>
Labore sint harum, ipsum repellendus eaque recusandae assumenda dolores debitis quidem voluptates impedit quo deserunt sequi id quia laborum fugiat voluptas voluptatibus modi, explicabo
minus illo magnam! Enim eum, omnis consequuntur hic numquam vitae ratione sed veniam qui neque perferendis dolorem ut aliquam dolores, dolorum, repellendus sit saepe tempora incidunt vel?
Eos iste unde deserunt perspiciatis dolorum totam nemo inventore omnis sequi accusantium est amet sapiente ipsam officia obcaecati nam ea voluptatibus eligendi vero veniam reiciendis,
consectetur eum. Aperiam repellat et provident voluptatum omnis, itaque doloribus suscipit maiores ea laborum neque alias cum iure velit vitae aut explicabo officia ex!
</p>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment