I have a site that still uses Drupal 7.x. I have a top banner that works fine on a large screen with greater than 1100px. However, that same banner will not work on smaller screens, especially not on smartphone size displays. So, if I put the banner into a block with an image tag, how can I change the source image for different display widths?
I tried using a percent width and media queries for the different background images. I haven't found a way to style the background image so that it resizes as a percent of the viewport. It will change the background image based on the media queries but I cannot get the alignment or the percent width of the background image to change with the change in the width of the viewport.
Thanks in advance for any advice on how to manage this issue. Maybe there is a module that handles changing the content of a block based on the size of the viewport.
If the banner doesn't fit on your smaller screen, try using background-size: contain or background-size: cover.
It should be possible to archieve this using CSS only, without the need to have different images in all media queries.