Skip to content

Instantly share code, notes, and snippets.

@FabienDehopre

FabienDehopre/dynamically-size-elements-with-pure-css.markdown

Last active December 19, 2016 08:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FabienDehopre/cebca6af3641cb8b5dcfe825ca3fcbd2 to your computer and use it in GitHub Desktop.
Save FabienDehopre/cebca6af3641cb8b5dcfe825ca3fcbd2 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamically Size Elements with Pure CSS
Raw
dynamically-size-elements-with-pure-css.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dynamically size element with pure css</title>
</head>
<body>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ex, quas unde. Illo sint modi, aliquam amet ex obcaecati magnam nemo odit perferendis voluptas blanditiis ut omnis quisquam debitis, praesentium.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quaerat inventore obcaecati, magnam eos aspernatur minus odit facere fuga dolorem harum id officiis voluptates error eveniet, doloremque, excepturi distinctio minima.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur saepe odit blanditiis, itaque tempore excepturi illo adipisci sed aut asperiores vero officia voluptatibus at, iste provident? Est modi a quia!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nihil non voluptatum est ratione animi porro vitae neque itaque aliquam. Incidunt illo, suscipit corporis ex asperiores, nisi ipsum rerum minus?</p>
</section>
</body>
</html>
Raw
style.css
body {
margin: 0;
font-family: monospace;
}
p {
margin: 0;
font-size: 2rem;
padding: 0 5rem;
text-shadow: 1px 1px #333;
color: #fff;
}
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
section:nth-of-type(1) {
background-image: url('https://unsplash.it/1920/1080?image=1068');
}
section:nth-of-type(2) {
background-image: url('https://unsplash.it/1920/1080?image=1073');
}
section:nth-of-type(3) {
background-image: url('https://unsplash.it/1920/1080?image=1047');
}
section:nth-of-type(4) {
background-image: url('https://unsplash.it/1920/1080?image=1032');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment