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

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>
   

Answer 2

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

Answer 3

This is possible to do in CSS3 with background-size

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}

Answer 4

Not possible. The background will always be as large as it can be, but you can stop it from repeating itself with background-repeat.

background-repeat: no-repeat;

Secondly, the background does not go into margin-area of a box, so if you want to have the background only be on the actual contents of a box, you can use margin instead of padding.

Thirdly, you can control where the background image starts. By default it's the top left corner of a box, but you can control that with background-position, like this:

background-position: center top;

or perhaps

background-position: 20px -14px;

Negative positioning is used a lot with CSS sprites.

Answer 5

put the below code in the body of you css file

background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;

Answer 6

If you want to set background-size in the same background property you can use use:

background:url(my-bg.png) no-repeat top center / 50px 50px;