'set background position to top in wordpress

I am using Wordpress and WPbakery. I have set a full-width, full-height background. But currently the background-position is set to centred with '!important' assigned as I see in the developer tools.

I want to set it to 'top'. I edited in developer tools in chrome and I achieved the desired effect. However I'm not sure how to make the changes permanent. I have tried copy pasting what I saw in the developer tools into the custom css field and editing it to 'top' but it wont override the theme. How do i go about it?

This is the current code seen in developer tools:

.vc_custom_1551104319445 {
background-image: url(https://unlicensedshrink.com/wp-content/uploads/2019/02/ulweb.jpg?id=9) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;

}

csswpbakery


Solution 1:[1]

Not sure in which order custom styles and the default CSS of the theme are output … try increasing the specificity of your selector, f.e. like html .vc_custom_1551104319445 or .vc_custom_1551104319445.vc_custom_1551104319445

When multiple CSS rules apply to an element and try to specify values for the same properties, it becomes a matter of specificity, which one “wins”.

Here are a few resources on that topic:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specificity.keegan.st/

So if you try to overwrite something using the exact same selector you took from the WP/themes styles, it becomes simply a matter of order. Do the WP styles get embedded last? Then they win, otherwise yours would.

A simple way around that, is to increase the specificity of your selector. Selecting elements of this class on the additional “condition” that are descendants of the html element is one way to do that. Or to repeat the class name, so that .foobar becomes .foobar.foobar … and lots of other possible ways.

Solution 2:[2]

You need to see which file is producing the code. For instance - Highlighted file

After you know which file is responsible for the code, then you go to the site directory and implement the file in question.

Solution 3:[3]

I wouldn't suggest using the vc_ number selector. Best to use or even better add a custom selector on the row or element itself and then apply the following CSS.

.has-bgimg-right.vc_row-has-fill{
   background-position:center right !important;
}

What ends up happening if you use the vc_ number selector is if you or your client go to update that field the vc number will change and you will be shaking your head. So create a custom selector class and use the vc_row-has-fill which will never change.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 04FS
Solution 2 Deme7rius
Solution 3 StefsterNYC

Related Questions