Set size on background image with CSS?

Question

Is it possible to set the size of the background image with CSS?

I want to do something like:

background: url(\'bg.gif\') top repeat-y;
background-si         


        

Answer 1

Only CSS 3 supports that,

background-size: 200px 50px;

But I would edit the image itself, so that the user needs to load less, and it might look better than a shrunken image without antialiasing.

Answer 2

In support of the answer that @tetra gave, I want to point out that if the image is an SVG, then resizing the actual image is not necessary.

Since an SVG file is just XML you can specify whatever size you want it to appear within the XML.

However, if you are using the same SVG image in different places and need it to be different sizes, then using background-size is very helpful. SVG files are inherently smaller than raster images anyway and resizing on the fly with CSS can be very helpful without any performance cost that I am aware of, and certainly little to no loss of quality.

Here is a quick example:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(Note: this works for me in OS X 10.7 with Firefox 8, Safari 5.1, and Chrome 16.0.912.63)

Answer 3

Not too hard, if you're not afraid of going a little more in depth :)

There's one forgotten argument:

background-size: contain;

This won't stretch your background-image as it would do with cover. It would stretch until the longer side reaches the width or height of the outer container and therefore preserving the image.

Edit: There's also -webkit-background-size and -moz-background-size.

The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.

- Source: W3 Schools

Answer 4

background-size: 200px 50px change it to 100% 100% and it will scale on the needs of the content tag like ul li or div... tried it

Answer 5

I use background images for buttons, but it only shows the image the same size as the text, even if I set width and height. Instead, I pad out my text with   characters (non-breaking spaces). I slap in as many as needed, basically, until all the button background appears. So I might have code like this:

In the style sheet:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

In the HTML document:

<div id="v2menu">
    <a id="v2menu-home" href="/index.php">home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->

Answer 6

You totally can with CSS3:

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

This will size a background image to 100% of the width of the body element and will then re-size the background accordingly as the body element re-sizes for smaller resolutions.

Here is the example: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/