Center Images on Mobile

Support
#1

How do I change the page background image positioning for mobile? I know how to do @media and max-width, but I’m not sure how to specify the background image for the page and then can I do position left or center left? Or is there a way to specify having a completely different background image just for mobile? www.maggiecarvalho.com

Thank you!

#2

Hi There,

As you have a slider I would recommend you clicking on the section or row and hiding it on mobile and creating a new section for mobile and hiding it on the other screen widths.

Hope it helps

#3

Oh, sorry it’s not a slider, the image throws you off. It’s actually a page background image inserted in the page settings. So when you scroll through the page you can still see it on other sections that are transparent. Hmm, but you’re right I could just hide the sections that are transparent and add a different image to those sections.

Or is there a way to change page background image for mobile?

#4

Or is there a way to compress/squeeze page background images for responsiveness instead of have them be cut?

#5

Hi There,

If you do have the standard background-image property, then yes you can apply the background-position property (http://cssreference.io/property/background-position/) which defines the position/part of the image that you want to focus.

Unfortunately, what you have now is the backstretch/sliding background which is JavaScript driven.

What do we advice is to hide the sliding background on mobile and then show a single portrait oriented background-image instead.

@media (max-width: 480px) {
	/*hide the sliding background*/
	.home .backstretch {
		display: none !important;
	}
	/*show a single standard background-image for mobile*/
	body.home {
		background-image: url(BACKGROUND IMAGE URL HERE);
		background-repeat: no-repeat;
    	background-size: cover;
    	background-attachment: fixed;
	}
}

Feel free to adjust the @media query.

Hope it helps,
Cheers!

#6

That solution is absolutely perfect for me. Thank you so much!

#7

On behalf of my colleague, you’re welcome. Cheers!