treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] To background-repeat or no-repeat

  • Hi Folks,

    I have long standing question that I'd love to have answered (and prompted me to sign onto this forum).

    Is there any benefit to specifying "background-repeat: no-repeat;" if the element is sized to fit the background image anyway?

    Example of a graphical title:

    h1 {width: 300px; height: 100px; background: url('title.gif') no-repeat; text-indent: -9999px; overflow: hidden;}     
    

    I do it out of habit and a sense of 'tidiness' but I wondered if it might also reduce the page memory load? (as the background image is tiled only once)

    But if the 'repeat' property is totally redundant in these cases, I would probably save a lot of time each week by not typing it over and over again.

    Thanks,

    CJ

  • As far as I am aware, it is redundant. The image only downloads once, and the repeats don't actually exist anyway (as the image size matches the size of the element). It's not something that I use unless the image size and the element size do not match.

  • Two things in my opinion:
    * Yup, it is kind of redundant since the element has the size of the image
    * But it is a bit more safe in my opinion if in any case the element become wider for X or Y reason

    In the end, it's up to you.

  • I always use no-repeat if it's a single instance background, just for safety in case someone zooms and it reveals a few px either side.

  • Thanks for the feedback folks!

  • Good call, @andy_unleash. I'll have to give this some further thought.