Docs

[jquinn33]

Hi! I’m trying to figure out how to resize the background image on one of my pages and have it keep it’s 100% width at different screen sizes. I’ve tried the tips I’ve found in other threads, including adding the following CSS to the customizer:

.bg-image {
background-size: contain !important;
}
.bg-image {
background-size: cover !important;
}
.bg-image {
background-size: 100% 100% !important;
}
.bg-image {
background-size: 100% auto !important;
}

So far I’m not able to find a solution. This is only for a page where I have a background image selected in the normal page editor (not Cornerstone).

Thank you for any possible guidance! 🙂

[jquinn33]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! We can force the background image to fit on the container but it will look squeeze.

Add this on your custom CSS on Customizer.

.backstretch img {
	width: 100% !important;
	left: 0 !important;
}

Read this posts how background image works.

– https://community.theme.co/forums/topic/section-background-image-2/#post-691126

– https://community.theme.co/forums/topic/background-image-on-phone/#post-780991

Cheers!

[jquinn33]

Oh! That’s perfect! Just what we needed! Thank you so much, Friech!! 🙂

[Christopher]

You’re welcome.

[Author]

Posts