Background image not centered on mobile

lachunyx · December 2016

The background images on the homepage of my website http://myaberdeenproperty.co.uk/ don't get cut centered when viewing the website on a mobile devices. The background images get cut on the right side for mobile devices but then the main information of the picture is cut away. Is there any code to implement, so that the images get cut from each side and the center stays centered on mobile devices?

Albert · December 2016

Hi,

css backgrounds are not responsive and never won't be. Please notice that it has nothing to do with the theme itself and it's more a technical problem between css and being responsive technology.

Thanks!

lachunyx · December 2016

But then I don't understand why other themes can do it. For example, the Impreza theme make it work on mobile. See website http://wurllplus.de/

Albert · December 2016

We must be talking about different things then because as we can see, their backgrounds are not responsive as well. Could you send us screenshots with comparison of both then?

lachunyx · December 2016

What I meant is that the background pictures on http://myaberdeenproperty.co.uk/ don't show the center of the picture on mobile devices. You see the left part of the picture. While on the other website you can see the center of the background pictures. The picture in this case is cut on the left and right. I don't know how to send screenshots, but maybe it's clearer now?

Albert · December 2016

http://pasteboard.co/7f7snLbFd.png - this is how BeTheme's background looks like on mobile
http://pasteboard.co/7f8dgYaKx.png - this is how other theme's background looks like

Do you see that both are cut on mobile? Because for us, both backgrounds works exactly same way and we really don't know what are you talking about.

To send us screenshots, you can use any online tool like http://snag.gy/ or http://pasteboard.co/

lachunyx · December 2016

http://pasteboard.co/7lNyw9y49.png – this is how BeTheme shows the background on a laptop device
http://pasteboard.co/7lQkZ6UKS.png – this is how BeTheme shows the background on a mobile device
http://pasteboard.co/7lRkrifuP.png – this is how the other Theme shows the background on a laptop device
http://pasteboard.co/7lSff9TLz.png – this is how the other Theme shows the background on a mobile device

The first two screenshots show that on mobile devices only the left part of the background picture is shown. Therefore, the picture is cut from the right side. You can't see the flower. The other two
screenshots show that on mobile devices the center part of the background picture is still visible, you can see a part of the house. So the picture got cut on the left and the right.
I would like the first website to
still show the center of the background picture which means showing the
flower as well. Is that not possible?

Albert · December 2016

Ok, we can see what you mean now but this has nothing to do with the theme again and the following screenshot will be a clear proof http://pasteboard.co/7m8Ymd5h9.png - as you can see, you set left alignment for images inside Visual Composer plugin and that's why images are always aligned to left. But if you look at http://pasteboard.co/7mcJsR2Y9.png (yes, we disabled this alignment) you will see that backgrounds align the same as on other site.

lachunyx · December 2016

I don't know how I set left alignment for images in the Visual Composer. First, I tried to find a setting to change it. Second, I tried to override the code and placed this code inside the custom CSS and that doesn't work either.

http://pasteboard.co/7nTyfTCI4.png – This screenshot shows the set coding background-position: 0 0 !important; and below my coding background-position: center center !important; which is crossed out and not excepted.

Do you have any suggestions?

Albert · December 2016

If you can not find the option where you set it up, then the only solution we have is to set same bg position for all vc rows with the following css:

.vc_row {
    background-position: center !important;
}

lachunyx · December 2016

Thanks for the general code to reset all the picture positions. That is what I was looking after.
I put the code in three different CSS editors but it doesn't seem to override the following code: background-position: 0 0 !important;

You can see it on this screenshot – http://pasteboard.co/7HoXr4vTQ.png
The code you gave me is crossed out.

Albert · December 2016

Did you put it under Theme options > Custom CSS & JS > Custom CSS section on 1st position?

lachunyx · December 2016

Yes I did.

Albert · December 2016

So if above css does not work, please try below instead:

.vc_row.vc_row-fluid {
    background-position: center center !important;
}

lachunyx · December 2016

That worked! Thank you so much!

Albert · December 2016

You are welcome!

Background image not centered on mobile

Comments