Docs

[yuyoht]

Hi I been tried different methods that you post on another post for situations like that but it can’t resolve for me, if you can help me to figure out how can my page can auto adjust the background image to fit on mobile device and tablets it is a great for me to know.
Thanks for your help!

[yuyoht]

This reply has been marked as private.

[yuyoht]

I just need some help!
Please

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (max-width:  480px) {
	.home .x-section.bg-image.parallax, .home .x-section.bg-pattern.parallax {
	    background-size: 100% 100% !important;
	}
}

Hope it helps, Cheers!

[yuyoht]

Hi, this custom css make changes to the witdth only but the height of the image stay at same so the image look like over strech and cant adjust on scale. I have tried to change 100% 80% and the image adjust but it have a sbackground space,’
I think that it is the colum layout have problem to adjust scale to screen, I been watching your demo Etheos 2 that is the same that we use and you have the same behavior in that demo.

Again thanks for your help!

[yuyoht]

I have a behavior now with the slider revolution, a Text distortion

[Paul R]

Hi,

The background image by default is set to cover which means to scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.

You may try other option like contain, initial, inherit or percentage but please note that there are limitation to each options.

You can try each option on the link below.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

For more information regarding this please check links below

http://www.w3schools.com/cssref/css3_pr_background-size.asp

https://css-tricks.com/almanac/properties/b/background-size/

Hope that helps

[yuyoht]

Thanks for the info.

[Joao]

You are welcome.

Joao

[yuyoht]

Can I apply a css code just for the mobile version?

[Joao]

Yes you need to wrap the code in a media query:

@media only screen and (max-device-width: 480px) {

Your code here

	}

More info:

https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Please note that a normal mistake is that the media query has it´s own closing bracket, so once you put your code inside it usually will close with two “} }”

Hope that helps,

Joao

[Author]

Posts