3

How do you adjust the background-image's size with CSS?

Adi
  • 5,089
  • 6
  • 33
  • 47
Nitin Jindal
  • 248
  • 3
  • 8

5 Answers5

7

You can use CSS3's background-size property

Here's the code to make it work in every browser that supports it

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
nunopolonia
  • 14,157
  • 3
  • 26
  • 29
  • this property doesn't support – Nitin Jindal Jan 17 '11 at 10:12
  • I edited the answer to include the code to every browser that supports it – nunopolonia Jan 17 '11 at 10:15
  • background-size property does not support – Nitin Jindal Jan 17 '11 at 10:17
  • Its a little unfortunate (but not surprising) that this list of supported browsers doesn't include IE. – Spudley Jan 17 '11 at 10:18
  • I'm not understanding what you mean by "property does not support". can you be more specific? – nunopolonia Jan 17 '11 at 10:20
  • @Nitin Jindal - Please do specify the browser you're using. If you're using a browser that isn't in the list he's specified, please say so. @nunopolonia is trying to help you, but your response is not making it easy to know what the problem is. – Spudley Jan 17 '11 at 10:20
  • @Spudley IE9 supports background-size property. Think Microsoft is trying to catch up on IE9 – nunopolonia Jan 17 '11 at 10:21
  • 1
    @nunopolonia - indeed it does. However IE9 is not yet released, so it doesn't count. I know it's in beta but until the final release, IE8 is the current version (and even after IE9 is released, we'll still need to keep supporting IE8... and IE7.... and for some poor souls, even IE6 still for some time yet). – Spudley Jan 17 '11 at 10:47
2

You might consider using the jQuery plugin Backstretch.

Honest Abe
  • 8,430
  • 4
  • 49
  • 64
Durga Dutt
  • 4,093
  • 11
  • 33
  • 48
1

This is how you do it. For all browsers.

body 
 {

    background-image:url('../back.jpg');
background-repeat:no-repeat ;
 -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
     -o-background-size: 100% 100%;           /* Opera 9.5 */
-webkit-background-size: 100% 100%;           /* Safari 3.0 */
        background-size: 100% 100%;           /* CSS3-compliant browsers */

   -moz-border-image: url(../back.jpg) 0;  
 background-size: cover;  /* Gecko 1.9.1 (Firefox 3.5) */
   }
Raj Nandan Sharma
  • 3,694
  • 3
  • 32
  • 42
0

Aside from CSS3, it seems for previous level(s) (i.e. the standard) the only way is to craft your image the right size and set its background-position and background-repeat properties

MattiaG
  • 241
  • 1
  • 2
  • 9
0

You could use the background-size CSS property;
however, it's worth noting that older versions of browsers may not support this.

Another approach is to create a new <div> element with position:absolute and a low z-index so it is behind the other relevant elements. You can then use this div for the background image and re-size it to the required dimensions independently of the main element in front of it.

Honest Abe
  • 8,430
  • 4
  • 49
  • 64
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • @HonestAbe - you are allowed (encouraged even) to edit other people's answers if they're out of date. I'm not going to keep going back through all my answers and check that nothing has changed, but if you find one, please feel free to edit it. – Spudley Aug 11 '12 at 08:25