- Posts
I need the hero image on our homepage to be responsive and go to 100% of whatever device it’s on. I’m not seeing a setting for it in the editor. How can I fix this?
https://atkinsonplumeria.com/Hello Mike,
Thanks for contacting BoldGrid support, we’re always happy to help!
I viewed your site and the background image is currently set to cover 100% of the space, and the image will crop to the center as the device size changes. If there is text on the image, it will not show the entire heading on all devices.
For the best SEO results, text should not be saved as part of the image, as search engines cannot read text in images. We recommend adding the text as a heading element in the editor. Then the text will show entirely on all device sizes and will be indexed correctly by search engines.
Please let us know if we can provide additional assistance.
Thanks,
NicoleThanks, that’s helpful to know.
However, the image is set to 100% but it is not responsive as of now to smaller devices. I would it to fit the width of a cell phone but it’s staying desktop size. How can that be fixed? TIA
Hi Mike-
Right now, the image is set to “cover” the available space. This is a special attribute for background images to fill the available space, focus on the center of the image, and respond to different device sizes.
For your requirement of always showing the full image on every device size, I’d recommend switching to a normal image, rather than using a background.
First, use the gray-colored Edit Section > Section Width option to expand the section to full-width:
Then, use the Add Media button to add the image, and select Full Size.
- The topic ‘How to Show Full Background Image on Smaller Devices?’ is closed to new replies.
