Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 983 of the free egghead.io lessons, plus get CSS content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Dynamically Size Elements with Pure CSS

2:57 CSS lesson by

Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!

Avatar
Matias

Final example transcript will be nice

Avatar
Wayne

The plunkr code seems to not match the video.

Avatar
Fabio Bedini

this is very cool :D

Avatar
Robert Smith

We should be careful with the background-attachment: fixed; property; it's loaded with performance issues.

A workaround could involve using position: fixed; and setting it to render via the GPU with will-change the property. That unfortunately will result in more verbose code, but I thought I'd just point out that one should use the background-attachment property sparingly, if at all in production code.

Avatar
Simona

Is it something that happens only to me, or almost all the videos in this sections, have the css code transcripted just like they are at the start of the video? That means that the important rules which make the difference are not there....

Avatar
ray

It's in the code
<!--
For a more advanced use case:
https://embed.plnkr.co/6fbehgwPjVgWJpLrkym7
-->

In reply to Wayne
Avatar
ray

We should be careful with the background-attachment: fixed; property; it's loaded with performance issues.

A workaround could involve using position: fixed; and setting it to render via the GPU with will-change the property. That unfortunately will result in more verbose code, but I thought I'd just point out that one should use the background-attachment property sparingly, if at all in production code.

Can you spin up a plnkr?

In reply to Robert Smith
Avatar
Konan Houphoue

Is there a way to have the background-image also responsive? The text elements are but the background-image is not so on small screens the image shows partially.
Thanks, Konan

Avatar
gitnicos

just add:
background-position: center;

In reply to Konan Houphoue
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?