The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Dynamically Size Elements with Pure CSS

Dynamically Size Elements with Pure CSS

2:57
Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!
Watch this lesson now
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?