Set size on background image with CSS?

user_2224246 0
Viewed 896887

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-size: 490px;

But it seems it's totally wrong to do it like that...

css
18 Answers

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

user_3764830

Just have nested divs to be cross browser compatible

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
user_6167660

You can use two <div> elements:

  • One is a container (it is the one which you originally wanted the background image to appear at).

  • The second one is contained within. You set its size to the size of the background image (or the size you wish to be appearing).

The contained div is then set to be positioned absolute. This way it does not interfere with the normal flow of items in the containing div.

It enables you to use sprite images efficiently.

user_6181290

background-size is working in Chrome 4.1, but so far I couldn't make it work in Firefox 3.6.

user_2610870
Related