Hello, This is my first time contacting the forum. I searched for an answer first, but didn’t see my question addressed.
I am creating a site using free Vantage. I have added a masthead image. When I test by reducing my browser window, the masthead doesn’t shrink with the page, it cuts off on the right. The rest of the content on the pages shrink down, including the footer.
You can see the site here. http://aoawestcom.ipage.com/aoawestwp/wordpress/
Do you know of any css I should add to get the masthead image to reduce along with the size of the browser window, or perhaps I have the wrong settings chosen. I am using Masthead Background Image Layout – Default; Layout Bound: Boxed; Full Width Page, No Title.
Thank you kindly,
Michele
Hi Michele,
It looks like you’ve come up with a solution to allow for what you’re after. Unfortunately, what you’re experiencing is expected when using a background image set to Cover (that’s what the default value is – background-size: cover;). Cover works by ensuring the image is always the same height of the area the background is applied to and to ensure this the browser can (and will) clip the sides of the image off. This can be problematic on mobile because if you if the area the image is applied too is too large or doesn’t resize enough.
Unfortunately, the solution you came up with is about as good as you can get with backgrounds set to Cover, but you can completely avoid this by adding the image the image using a SiteOrigin Image widget as HTML images will not experience this. To do this, please navigate to WP AdminAppearanceWidgets and add a SiteOrigin Image widget to your Masthead widget area and set it up as desired.