How to readjust the background image for mobile

[lgnanendran]

Hi Team,

I’m trying to re-adjust my background picture using rev slider for mobile phones. I’m trying to specify exactly where I want the grids to be when viewing the website on a mobile device. I see the blue grids and I know about the background image position option, but that doesn’t let me specify exactly where I want the image to be cropped when viewing on a mobile device. Is there any way to move those blue grids around to the desired location?

I’ve looked around and haven’t really found an answer that specifically answers that question. Please let me know if you require more information.

Note: I want this image to display correctly (which it does) on desktops and then just re-adjust when on a mobile device because the background picture I’m using doesn’t have the subject centered. It just looks a bit odd when viewing on a mobile device.

Regards,

[paul.r]

Hi,

To adjust it in mobile, you cann add the code below in Slider Settings > Custom CSS

@media(max-width:767px) {
.slotholder .tp-bgimg.defaultimg  {
      background-size: cover;
      background-position: center center;
}
}

You may change background position and background size as you like.

https://www.w3schools.com/cssref/css3_pr_background-size.asp
https://www.w3schools.com/cssref/pr_background-position.asp

Hope that helps