Bulumko Papu• 180
@bulumkopapu
Submitted
I struggled a bit to make my footer background image respond to different screen sizes.
Please review my code and let me know if you have a better way to do it.
Thanks
oFrederic
@oFrederic
All comments
- oFrederic• 10
@oFrederic
Posted
Hello,
For this very example, you could create a div that would contain the footer and inside that container, you can fit an image with the following CSS to make that image reactive =>
img { width: 100%; height: inherit; object-fit: cover; }
Keep this block of code somewhere, you will use it a lot.
PS: the inherit is only if you do a position: absolute; otherwise you can do 100%.
0 - Anna• 545
@NitaLewska
Submitted
It was an interesting challenge.
- I've finally started using CSS variables
- I've tried to use BEM-system for classes, I know it's not perfect, still I'm proud of myself
- Doing that footer background mask was quite difficult, but now I know how it is to be done to use it in my next projects
oFrederic• 10@oFrederic
Posted
I think accessibility is a good habit to have right from the beginning. but it's just my opinion.
0
