0

I have the following scenario.

In our site header, One CSS property background-image:url(image.png); is overridden with background-color:red!important. There is no way I can change the HTML or class since they are generated dynamically by jQuery.

Even the property value background-color:red!important should stay in tack and adding !important to the background-image will affect other pages.

But only one page, I want the background image to show overriding the background-color. How I can do this?

Hope I made sense.

UPDATE

Follow are the CSS selectors and the correct DOM structure (on all pages in header)

#my_id.section{
background-color:red!important;
}
#my_id.section{
background-image:url(image.png); /*.. it's overridden with bg-color..*/
}

On a only one page I want

#my_id.section{
background-color:red!important;
}
#my_id.section{
background-image:url(image.png)!important; /*.. this should not be overridden with bg-color even though it has !important..*/
}

Please note: Since the CSS are generated dynamically and users can change their values, they cannot be adjusted.

Ayanize
  • 485
  • 1
  • 4
  • 21

1 Answers1

0

Maybe you could try something like this:

$(function(){
    $("#my_id.section").css("background-image", "url(image.png)", "important");
});

If that works for your case...

Ivan Gajic
  • 456
  • 4
  • 12
  • Thanks. I tried with that but the problem is the background image is selected by the user and I cannot hardcode that. I also tried to get the CSS value of background image like $(#my_id.section).css('background-image'); but since it's overridden and stricken through, jQuery cannot pick this. It only picks the background-color. – Ayanize Feb 24 '17 at 08:09
  • From [jquery docs](http://api.jquery.com/css/): "Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin." Here is a [SO post](http://stackoverflow.com/questions/462537/overriding-important-style) trying to achieve something similar. – Swimburger Feb 24 '17 at 08:13
  • I think you have some typo in your code here: $(#my_id.section).css('background-image'); IT should be $("#my_id.section"), because I've tested it, and it works fine. Take a look https://jsfiddle.net/19hh79jL/ – Ivan Gajic Feb 24 '17 at 08:25