Hi, I’m working on a page with three columns that has a background image. It works in desktop but quickly causes issues with spacing at the bottom of the image and has issues in tablet and mobile sizes. Is there a way to contain the image in the background layer and have the container area size to the image so it doesn’t show a large space below as the page sizes down for other devices? I’m attaching a screenshot of my settings and a link to the page for reference.
Hello @3HExapaT,
Thanks for writing in! I can see that you have set a 750 pixel height for the Column. As soon as you resize the browser window, the Column widths gets narrower yet the height is still the same. You may need to change the height of the Column responsively. Please check out this documentation to be familiar with the Responsive Element Styling:
We also recommend that you check out this documentation to understand how the background image works as it may not be suited best for your current layout. For you to better understand how background images works, with Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
Best Regards.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.