0

I'm editing a page and I can't change the html, only the css, but I need to change a background-image that is declared inline with !important. I've already tried to declare background-image: none !important; or change bg position until it disappear and then declare the new bg image on :before pseudo-element, but it doesn't work. Is there any way to do this WITHOUT change the html? Here's the code:

<ul class="list-inline">
    <li>
       <a href="http://www.facebook.com/portoseguro" target="_blank">
         <span class="gIconSocial fb" style="background: url('https://cliente.portoseguro.com.br/static-files/Institucional/Icones/facebook_off.png') no-repeat !important;">Facebook</span>
        </a>
    </li>
</ul>

(I can't use javascript too, only css)

stairwaytoeve
  • 186
  • 1
  • 3
  • 12
  • Possible duplicate of [How to override !important?](http://stackoverflow.com/questions/11178673/how-to-override-important) – Hackerman Nov 09 '16 at 14:05
  • It's not a duplicate, you can override !important that is in css-file by adding another after that but this is inline css. I think this can't be done. If you can add css why can't you add javascript? – Esko Nov 09 '16 at 14:07
  • If you have JavaScript you can change it using that, otherwise you're out of luck. Hackerman's suggestion is not true, it's about overriding a rule in a CSS file, which can be done by adding one with higher specificity, but for inline styles, that can't be done. That is probably why they added it like this: to make really really sure no-one tempers with it. – GolezTrol Nov 09 '16 at 14:07
  • Link:-https://css-tricks.com/override-inline-styles-with-css/ – Razia sultana Nov 09 '16 at 14:21

2 Answers2

2

The browser gives the priority to the inline style. And, since this is with !important property you have to edit the HTML to get rid of this if you wanna do this with CSS only.

I recommend you to read more about Specificity on applying styles

Saiyaff Farouk
  • 5,103
  • 4
  • 24
  • 38
1

You can hide the background image by adding the CSS background-size: 0; and try to put a background image to ul.list-inline > li > a[target=_blank]

EDIT :

rather use ul.list-inline > li > a[target] or it wont work

Mouradif
  • 2,666
  • 1
  • 20
  • 37