0

If you go to www.joinbunch.com and resize the browser, you can see that the background image scales very nicely when resized.

What would be the best way to accomplish this?

eveo
  • 2,797
  • 15
  • 61
  • 95
  • What do you mean with "rotates"? I can only see it resized when I shinrk the window. – Luis Jul 02 '13 at 23:26
  • My bad, scale is what I meant, not rotate. – eveo Jul 02 '13 at 23:27
  • possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) – pasine Jul 02 '13 at 23:31

2 Answers2

2

The easiest way is with css background-size cover. This will scale an image so it will cover the entire area.

 #myelement {
     background: url(myback.png) cover;
 }

full syntax:

 #myelement {
     background-image:url(myback.png);
     background-size:cover;
 }
Daniel Gimenez
  • 18,530
  • 3
  • 50
  • 70
  • This is the way that the site provided is doing it. They have a selector of `.bg-wrapper #bg0, .bg-wrapper #bg1` and it's applying `width:100%;height:100%;background-size:cover;position:absolute;top:0;left:0;display:none;z-index:0;overflow:hidden;background-position:center center;` – Blair McMillan Jul 03 '13 at 01:34
1

The background image of the <div> containing the image must have the attribute width to a 100%... or some other percentage.

To explain it a little bit more:

Check this Link http://css-tricks.com/perfect-full-page-background-image/

Via CSS3

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

"USUAL" way

HTML markup

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS markup

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

They also provide a demo:

http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

I recommend that page, it has a lot of tricks for css.

Hope it helps!

Luis
  • 5,786
  • 8
  • 43
  • 62