16

I want to be able to reproduce the behavior of this website's image when resizing.

It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale.

Here is an example:

http://themes.evgenyfireform.com/wp-jad/

For now my background has the following css:

#bg {
    position: fixed;
    top: 0;
    left: 0px;
    width:100%;
}

The problem is that it's fixed and I want it to crop when the image can't be scale.

Sam Bellerose
  • 1,782
  • 2
  • 18
  • 43
  • 1
    Do you have any code you can share? What attempts have you made so far? – Dryden Long Aug 19 '13 at 22:21
  • 1
    For now my background has the following css: #bg { position: fixed; top: 0; left: 0px; width:100%; } The problem is that it's fixed and I want it to crop when the image can't be scale. – Sam Bellerose Aug 19 '13 at 22:30
  • This is probably what you're looking for: http://css-tricks.com/perfect-full-page-background-image/ – Dryden Long Aug 19 '13 at 22:36

1 Answers1

38

You are looking for this combination:

background-position:50% 50%;  /* Sets reference point to scale from */
background-size:cover;        /* Sets background image to cover entire element */

Working sample fiddle here.

Note that this is not supported by IE8 and will require JS hackery there if you need IE8 or older to be supported.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136
  • This is cool, but how to solve the squeeze when lower width? possible auto scale with hight:100%? – bard Jan 04 '15 at 18:52
  • 1
    Agreed this is cool, but I have found with Firefox 44 on CentOS 6, Xorg CPU usage goes up to nearly 100% permanently after resizing a window with a body using a large image in this manner. You have to restart Firefox to bring it back to normal. Developers might be advised to care about this bug. – Adam Leggett Feb 19 '16 at 23:28
  • image with lower height is not scaling proportionately. any workaround? – fatCop Apr 19 '16 at 07:34
  • @fatCop impossible, `background-size:cover` is strictly defined to maintain aspect – Niels Keurentjes Apr 19 '16 at 15:33
  • This works well in combination with `padding` and `background-origin: content-box` – Danny Beckett Dec 16 '18 at 13:40