Dynamically Size Elements with Pure CSS

Damon Bauer
InstructorDamon Bauer
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

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

Robert Smith
Robert Smith
~ 8 years ago

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.

Simona
Simona
~ 8 years ago

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....

Ray Dai
Ray Dai
~ 8 years ago

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?

Konan Houphoue
Konan Houphoue
~ 8 years ago

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

gitnicos
gitnicos
~ 8 years ago

just add: background-position: center;

reactor.wlb
reactor.wlb
~ 5 years ago

The plunkr code seems to not match the video.

For the last demonstration

Markdown supported.
Become a member to join the discussionEnroll Today