CSS background image to fit width, height should auto-scale in proportion?

Question

I have body { background: url(images/background.svg); }The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion. e.g. if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high. The height should change automatically if the window is resized. Is this possible?At the moment, Firefox looks like it's making the height fit and then adjusting the width. Is this perhaps because the height is the longest dimension and it's trying to avoid cropping? I *want* to crop vertically, then scroll: no horizontal repeat.Also, Chrome is placing the image in the centre, no repeat, even when `background-repeat:repeat` is given explicitly, which is the default anyway.

Answer 1

Yeah, if the height is higher in dimension than the width, by default the element will try to keep it contained so it doesn't crop. That means that it will leave empty space on the sides if there is no repeat on the background image. What you can do is use a css property called backgrond-size where you can manually set the width and height of your background image. Here's an example below

https://jsfiddle.net/2wo7xy50/10/

For the best result, you should use background-size: cover so it covers the entire element. If you need to position it, use the background-position property. If you need a specific width and height for background, use background-size: width height; (replace width with a size and height with a size ex: 100% 50%).

.container {

background: url("your-url");

background-repeat: no-repeat;

background-size: cover;

background-position: center cehter;

}