Can we create this in Woodmart?

Hi there,

Could you please check this website and let me know if it’s possible to create a similar effect (the section that has this text: “play with firepower”) in woodmart using the visual composer panel?

http://www.wilson.com/en-us/tennis/rackets/baseliner/limited-edition-burn-100-countervail-orange-tennis-racket

Many thanks

Hi,

Sure, you can simply create a full-width row and set a background attachment option to be fixed with WPBakery page builder.

Regards

Thanks a lot,

I didn’t get to find any “background-attachment” option in WPBakery page builder, I had to set it via css file. Are you sure there’s such option?

Regards,

Sorry for that, you are right, WPBakery doesn’t have this option. But its okay if you did it with a simple CSS code.

It can be done via css editing, but the problem is when you set a background for a row thru WPBakery, it adds “important” to the background property and because of that, setting “background-attachement” to fixed doesn’t work. Now the only way to get it worked is to set everything including the background image in the css file.

Thanks

But you can set !important for the background attachment as well. Or if it will not work, so yes, you will need to set the full background property there.

I had already done that but it didn’t work. So I have to do it manually for every single product? hmmm…

I hope you consider adding this feature in your future updates.

Regards

Could you please send us an example of product with such row on your website?

Sure, here you are: https://goo.gl/WdcrL2

But why do you need to add it manually for each product? The code is added to the CSS file and will be applied to all products.

Every product has its own background photo and since I can’t add the background via Bakery panel, I need to do it via css.

OK, could you please now set a few products with their background color and add an extra class for them for example – background-fixed. Provide us links to both products and we will prepare a general solution for you.

Hi there,

Here they are as you asked:
https://goo.gl/qgrQng
https://goo.gl/D4qxmT

I used the class “moefixedbg” for them.

Regards

Try to use this code snippet

.moefixedbg {
    background-attachment: fixed!important;
}

If you check my code, you’ll see that I’ve added that already. But the problem is that the background image propery (set by Bakery panel) has “important” itself and therefore the default background attachment (scroll) can’t be overridden.

But we tested this code and it worked perfectly for us. Could you please try to add it to the custom CSS section?

I added it to the custom css section too and it still doesn’t work.

OK, try to replace with this one

body .moefixedbg {
    background-attachment: fixed!important;
}

Bingo! Problem solved!

Thanks a lot for your help, I learned a new thing today.

Great, you are welcome 🙂

[Author]

Posts