Can't substitute section background image for mobile

Hi, I am trying to use different background image for section when page is viewed on mobile. Heere’s what I am doing:
1) I assign “hero-image” section ID to the section.
2) I add following CSS to “custom CSS for mobile”:

#hero-image {
		background-image: url("https://some.url");
		background-size: cover;
		background-repeat: no-repeat;
		background-position:center;
}

But nothing is changed on mobile.
When I assign the same ID to the row contained within this section it works as expected for the row. But I need this to work for the section as it contains several rows.

I tried the same via applying custom class and got same results – it worked for the row but not for the section.

Hello,

You would better upload square equal proportion images to the columns, and hide/show different columns on the desktop and mobile.

Best Regards

The background image is applied to the whole section. Otherwise I was not able to make it work with overlapping header and divider.
So hiding columns is not an option.
Also if this is a bug then it should be solved, so please investigate why applying CSS to a section via section ID does not work in my case.

Hello,

WoodMart theme cannot influence the behavior of the background image. This is the way it works. You can use Woodmart Slider with one slide and disabled auto-rotation, it allows you to upload different images on different devices and insert the content inside.

Best Regards

Actually, the problem was due to the fact that background image was already assigned in WPBakery. For some reason it’s not overwritten with custom CSS. When I assign two background images to section via global and mobile CSS and no background image is assigned in WPBakery everything works as expected.

Hello,

WoodMart theme does not influence that. This is the way WP bakery works.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts