Change background-position for images in Visual Composer

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

https://visualcomposer.io/article/background-image-position/ <– 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(http://yourwebsite.com/wp-content/uploads/2018/01/yourimage.jpg?id=31) !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.

Picture of Michael

Michael

18 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.

    1. Thanks for the compliment! Just took a lot of time, I’m just figuring things out haha. Glad I helped you out!

  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 *

About Me

I run Pixl.my, a managed hosting service in Kuala Lumpur, Malaysia.

This is a place for me to pen my thoughts.

Recent Posts