This’ll be a super short post as I’m busy AF trying to finish a site tonight, but basically: <– This doesn’t work

And I spent probably an hour trying to wrestle with custom CSS trying to get it to override the !important, probably Googled the same links as you, till I stumbled upon the solution.

And it’s a super DUH! solution, lol.

The solution

1. Exit the VC editor, go into the Classic Mode.

2. Look for your code for the image. It’ll be something like:

vc_column width="1/2" css=".vc_custom_1516705833353{background-image: url( !important;background-position: 0 0 !important;background-repeat: no-repeat !important;}"

3. Simply change the underlined code in background-position: 0 0 !important to something else, e.g.

background-position: bottom right !important

Mega DUH! moment for me. Comment here if this hit you like a truck too. Lol.

Happy designing.

17 Responses

  1. You are a genius! I’ve been looking for an answer for two hours when I stumbled on your post! So easy when you know it! I just can’t understand why it’s not an option directly in the page builder… Thanks.

  2. Awesome thanks! And such an easy fix. I notice if I make any changes through the VC interface for the modified element, it will reset it back and I’ll need to make the change in classic editor again. Just FYI. But this saved me a bunch of time and youre right, duh! Thanks again

Leave a Reply

Your email address will not be published. Required fields are marked *