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.

Further Reading