0

I have a header image that I would like to change responsively. However is shows in CSS as element.style and overrides any CSS that I add. I read some answers on this forum, however I still do not understand what do I need to do to override this setting. I think that my theme manages this. I have code like this and I want to change background-image:

element.style {

      background-image: url('https://imagelink.com');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(0, 0, 0, 0);
      min-height: 499px;

}

EDIT: My main goal is to background-image responsive for smaller/bigger screens, because my page builder (wpbakery) does not have this option

simke
  • 3
  • 2
  • Does this answer your question? [Override element.style using CSS](https://stackoverflow.com/questions/14910608/override-element-style-using-css) – Fabian S. Nov 09 '21 at 10:16
  • Yes, this is exactly my problem, as my page builder wpbakery manages this, however some of the solutions of this thread either do not work for me or I do not know how to implement them:( – simke Nov 10 '21 at 14:23

2 Answers2

0

CSS observes some rules to render the style and you need to follow them in order to manage your styles. In general, CSS will render first rules with !important, then selectors more specific, and then the last processed (if your specificity is the same and without !important the last rule will be rendered).

A good practice is to increase specificity when you want to override something, you can read more about it here.

Gustavo Goulart
  • 156
  • 6
0

The rules of priorities are the following:

  1. IDs are the most important (#unique-element).
  2. Classes come next (.multiple-elements).
  3. Names come then (div).

The more elements you have, the most priority. Example: div span.highlight has a higher priority than h1.main-title (2 elements + 1 class VS 1 element + 1 class).

In case of the same priority, it's the latest defined (the one on the lowest line in your file) that matters as CSS rewrited the rules previously defined.

Exceptions:

  • Inline code (<div style="...">) overrides everything.
  • Adding !important overrides everything even inline code but is considered bad practice because as it's higher than style="", it's also not affected by any changes you could make from JavaScript.

Examples with a bunch of fish

SteeveDroz
  • 6,006
  • 6
  • 33
  • 65
  • Thanks for the reply, in theory !important should work, but it does not, I think that my page builder still overrides it somehow and does not have any management options. – simke Nov 10 '21 at 14:26
  • That should mean there is another `!important` somewhere else that overrides yours. Open the DevTools (F12) and look for your rule in the CSS part of the inspector. If it is cancelled by another rule, you'll see a line through it. – SteeveDroz Nov 11 '21 at 06:00
  • Thanks, I have found the other, which someone else added and it solved my problem. However I think this might now be a good long term solution, but it should work for now. Thank again for the answer. – simke Nov 11 '21 at 13:33