如何使背景图像大小保持其比例？

Question

Example: http://jsfiddle.net/SJUeK/

I want for a background image in example to be always its full height (dependent on width). I can't do it with pixels, because it needs to be responsive.

Is there a way to do that? Or need I to use img in html?

Thanks in advance.

Answer 1

Sure:

background-size: auto 100%;

Here's a demo.

Or if you actually meant "maintain its aspect ratio and scale to fit inside the container", then background-size: contain should do the trick.

Answer 2

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;
}

https://css-tricks.com/perfect-full-page-background-image/