Dynamically Size Elements with Pure CSS
Learn how to size elements based on the dimensions of the viewport, even when the browser is resized - no JavaScript needed!
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.
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....
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 withwill-changethe property. That unfortunately will result in more verbose code, but I thought I'd just point out that one should use thebackground-attachmentproperty sparingly, if at all in production code.
Can you spin up a plnkr?
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
just add: background-position: center;
The plunkr code seems to not match the video.
For the last demonstration