Search code examples
csstransformscale

Can I scale a background using CSS3?

More specifically, is it possible to scale a tiled background image using CSS3's transform:scale(x,y)?

Solution

  • While you can't use transform:scale(), if you know the final size of the background image that you need, you can you can use background-size to get the same effect.

    .selector {
    background-image: url(http://path/to/image.png);
    background-size: 200px 100px;
}

    However, if you always want to, say, "double" the width of the image that you use as a background, then that doesn't seem to be possible at this time.

    EDIT: Note that while the background-size style supports % based parameters, it's not as a percentage of the image size, but the size of the window.