Hello! Please see my screenshots, I set a background image but on the mobile device it is not visible at all. When I have it as a normal image (not background image), I cannot put the text over it as shown in my screenshot. How can I solve it?
Thank you very much!
Howdy, @Thiswonderfullife…thanks for writing in! I cannot tell exactly what is going on since you’ve not provided a link to see this live on your site, but from what I’m seeing in the screenshots you’ve provided, the image does appear to be there still, it is just not showing the whole image on your mobile device. Keep in mind that “hero” images when used in this capacity are meant to be more decorative than functional. These images by default use cover as the value for their background-size property in CSS, which I see you’ve updated to auto.
There is some nuance to the values you can place here, but auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained, while cover scales the image as large as possible to fill the container, stretching the image if necessary. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. In general, I would recommend keeping large images like this on cover, but along with that comes the understanding that on a smaller screen you will never be able to see the full asset because of the nature of the image resizing to fit its container. The only other option you have available if you must see the entire image would be to hide this Element at some point and setup a secondary “mobile” version of it that is styled differently to accommodate the image better.
Hopefully that helps to point you in the right direction. Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
