Search code examples
cssbackgroundoverridinginline-styles

Overriding CSS inline

Part of my stylesheet looks like this:

ul#secondary-menu li {
    background: url("images/secondary-menu-bg.png") repeat-y scroll right top transparent;
    padding-right: 2px;
}

How do I override the background image inline? I have tried this:

<li id="menu-41" class="item-41" style="ul#secondary-menu li { background: none;}"><a href="http://www.test.com">Test</a></li>

I also added the !important tag but it had no effect. What am I doing wrong here? Note that I am looking for a solution to override the background image inline.

Solution

  • Inline styles don't have selectors. They are just a set of declarations, so you can remove the selector and the curly braces:

    <li id="menu-41" class="item-41" style="background: none;"><a href="http://www.test.com">Test</a></li>