Why can't I stop background-repeat: from repeating?

I am having a bizarre issue. In the spirit of trying to write DRYer, shorter code, I want to remove 'no-repeats' from my individual h3 styles and do it with just one declaration. Below is an example version of the code that fails. The h3 in #c stubbornly will not stop repeating unless I set it as I did for #a and #b.

I have tried replacing background-repeat:none with :no-repe开发者_JS百科at, but no luck. Thanks in advance for any assistance!

.class > h3
    {   
        float:left;
        height:21px;
        width:200px;
        margin-bottom:10px;
    }

    #a > h3 {background:url(a.png) no-repeat;}
    #b > h3 {background:url(b.png) no-repeat;}
    #c > h3 {background:url(c.png);}

    /* EDIT: this code does not work (even after applying Thom's answer)    
    h3 {background-repeat:none;}
    */

    h3 {background-repeat:no-repeat;}

background is a shorthand declaration that sets a number of values. It's overriding your declaration of background-repeat. Replace #c > h3's background declaration with background-image instead.

Why won’t background-repeat:none work?

Because it's named no-repeat :)

OK, background-repeat:none it is not a valid property. You have repeat, no-repeat, repeat-x, repeat-y and inherit which inherit property from the parent element but none doesn't exist. Maybe it'll work with browsers like Chrome and Firefox that try to figure out what you meant but IE is very picky with this things.