Content Band Image Full Width

[weisbart]

Hello -

I would like to have a short and wide image across the width of my page (3000 px x 100 px) with a header on it top of it.

To do this I am using a content band but it instead of scaling the image to the width of the screen it is keeping the image at 100px high and cropping the sides. How can I get it to scale with the window? Should I be using something different than a content band?

Thank you - Erin

[friech]

Hi Erin,

Thank you for writing in, background-images are set to cover by default to make sure that its element/content-band is fully covered (more info about background-images property here).

You can not set the background-image to background-size: contain;, because that’s not going to cover the content-band in some sizes. You can’t force to fit (background-size: 100% 100%;) your background-image to content-band either because that is going to squeeze and/or stretch your image.

The best option you have is to switch a portrait oriented version of your image when the page is viewed on mobile. To do this, please add a class to your content band (e.g. my-class), and then adding this on your page custom CSS

@media (max-width: 480px) {
	.my-class {
		background-image: url(YOUR PORTRAIT ORIENTED BACKGROUND-IMAGE URL HERE) !important;
	}
}

Let us know how it goes,
Cheers!

[weisbart]

Thanks for the reply.

Is there a different (simpler) way to put a contained image on a page so that I can have a header float on top?

Thanks - Erin

[paul.r]

Hi,

Upon checking, I can see you have already put a green paint brush image on your header that seems to work well.

Can you please confirm if you still need help on this.

Thanks

[weisbart]

I do still need help on this.The brush image behind the main header is behaving as I described with the question about content bands but I don’t mind it doing so for the header.

I have h3’s (“Featured Patterns” and “MaternitySewing Exclusives”) further down on the page that I would like to put a similar brush stroke behind but for those I want the brush stroke to scale full width and not full height.

Thanks - Erin

[nabeel]

Hi again,

I checked your setup and you’re using brush stroke as an image, if your need it to scale full width then you need to use it as section’s background. You can do the same for all of your headings.

Hope this helps!