CSS: How to make responsive background image that excluded the aspect ratio of the image?

Question

I want to make a background image in the body that won't maintain the aspect ratio of the ratio.

html,
body {
  height: 100%;
  background-image: url(../images/xmasbg13.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

The code above works fine if the browser window is in full screen. But when I resize the browser, it maintains the aspect ratio of the image and won't cover the whole page.

check this. http://stackoverflow.com/questions/12609110/responsive-css-background-images — Manish Shukla, Dec 02 '15 at 04:10

score 0 · Answer 1 · answered Dec 02 '15 at 04:13

0

How about background-size:cover

http://jsfiddle.net/2ez1e3mn/

You can resize the results pane and the image resizes (full height and width) with it.

answered Dec 02 '15 at 04:13

Cynthia

5,273
13
42
71

hmmmm... background-size:cover should ignore aspect ratio. Do you have a working URL that illustrates the problem? – Cynthia Dec 02 '15 at 05:11
oh! I solved it now. I just remove the `height:100%`. – codiplex Dec 02 '15 at 05:25

CSS: How to make responsive background image that excluded the aspect ratio of the image?

1 Answers1