Good afternoon. I would like to have a different banner photo at desktop, tablet, mobile landscape, and mobile portrait. Is this possible? I’ve tried swapping photos at the breakpoints, but that changed the photo throughout the breakpoints. I thought it could work by changing the class, but that changed the class throughout all breakpoints. Your help is greatly appreciated! -Enrico
If you’re using image elements, you’d need to include all of your variations and hide all other variations based on the breakpoint. Keep in mind, images that are display:none still get called during the page load, so you’d essentially be loading 3 images (if you had a different version at each of the 4 standard breakpoint sizes) being loaded that aren’t displayed.
If you’re using a background image, you have the ability to apply a different background image at each breakpoint without needing to include any images not shown. Keep in mind that this means you’re not able to take advantage of the automatic responsive images used in Webflow on image elements, but you’d only be loading the one necessary image at any given breakpoint.
That said, is there a major difference with the images across your breakpoints? I wasn’t able to figure out which image you’re referring to on your project link, but if the images are the same (with a different crop or something) then I’d recommend using background-size or object-fit depending on how you’re displaying the image.
Thanks for your response. The image I’m talking about is the image on my “home” page. I had a larger image prior to this image, but it looked to small on mobile portrait. I reduced the size of the image and that’s what you see there now. I think I can live with it if I work it a little more. However, I’m going to try adding different background images like you mention and report back. Thanks, Enrico.
