tags:

views:

62

answers:

2

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-repeat, 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;}
+3  A: 

Why won’t background-repeat:none work?

Because it's named no-repeat :)

Pekka
Did you read the question? 'I have tried replacing background-repeat:none with :no-repeat, but no luck' or do you mean {no-repeat:none} or something like that? I took the background-repeat:none from within Paul Irish's http://html5boilerplate.com/ css file so it must have some use.
Zach Lysobey
background-repeat:none works fine now that I implemented Thom's answer. Maybe my next question should be "why DOES background-repeat:none work?" lol.
Zach Lysobey
Seems as though w3 schools css reference agrees with you however. http://www.w3schools.com/css/pr_background-repeat.asp. Now I don't know which one to use :-(
Zach Lysobey
@Zach nope, I didn't read closely enough, sorry. Will delete soon
Pekka
@Pekka no wait stop! lol! you were right. The version of code I fixed with Thom's code had :none not :no-repeat. I just tried changing this and it broke. +1 for my ignorance.
Zach Lysobey
@Zach ah, ok then! :)
Pekka
Regardless of if 'none' works or not, I'll remove it from the boilerplate. Not sure how that nastiness made its way in. Thx
Paul Irish
+4  A: 

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.

Thom Smith
Well that cleared everything right up! Thank you Thom. I had a feeling it was something along those lines.
Zach Lysobey