Yesterday I went to a workshop about Responsive Web Design.
I quite enjoyed it. As always I learned something new. Most of the workshop’s agenda was aimed at beginners. That was ok and I expected it.
But when it came to the practical project, I learned something new about responsive images.
For example, the background-position CSS-property can help to reposition an image. This might be useful when you want to show a different part of the image on a mobile device.
But I would prefer to use different images for different viewports and just serve a smaller image when a user requests the site on a device with a small viewport.
Still, it was cool to learn a new way of doing things.
With the background-image property, you can set an image for a selector/tag. AND you can also adjust the image’s opacity or other properties with another value.
For example,
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.5)
), url("https://someimage.url");
will lighten the image by applying a white sheen on top of it.
After the workshop I had an enlightening conversation with the instructor, Marvin, who gave me some insight into the industry and is an all-around amicable guy with a passion for good frontend design. It’s always wonderful to talk to people who are so enthusiastic about the web and programming.