Home Background Image on Mobile Not Focusing on Desired Part of Picture

[John H]

I have the Home Background Image enabled. When on mobile, it focuses on the center of the image, but I’d like it to focus on just the right side of the image. Is there custom CSS to have the image view align right when on mobile/low resolution?

[Spiracle Themes]

Hi John

Thanks for reaching out
You can add a background image through the Elementor page builder by hiding the default background image option in the customizer.
First of all, go to Appearance -> Customize -> General Settings and then enable the setting “Disable Home Background Image Section:”

Once done, the default Background Image will hide. Now you can easily add the Background image from Elementor and adjust its alignment in mobile view

Best Regards

[John H]

Hey there, I tried what you suggested but it turned out to be a lot of work to try to rebuild the background image through Elementor. Is there not some CSS that I can try?

Any reason that the following does not work?

@media only screen and (min-width: 480px) {
.img.parallax-slider {
transform: translate3d(-100px, 0px, 0px);
}
}

[Spiracle Themes]

Hi John

It would not take more than 2 minutes to add an image using Elementor. I have tried using CSS on this but it’s not working

===========
Use the CSS below to target the image

@media only screen and (min-width: 480px) {
#parallax-bg #slider-inner {
transform: translate3d(-100px, 0px, 0px);
}
}

Best Regards

[Author]

Posts