Grow your CSS skills. Land your dream job.

To background-repeat or no-repeat

  • # December 3, 2012 at 11:24 pm

    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

    # December 3, 2012 at 11:40 pm

    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.

    # December 4, 2012 at 3:35 am

    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.

    # December 4, 2012 at 4:41 am

    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.

    # December 5, 2012 at 6:57 pm

    Thanks for the feedback folks!

    # December 5, 2012 at 7:39 pm

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".