Fit background image to div

Question

I have a background image in the following div, but the image gets cut off:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

Is there a way to show the background image without cutting it off?

Answer 1

You can do it by using the background-size property, which is now supported by most of the browsers.

Try using the code given below to scale the background image to fit inside the div:

background-size: contain;

Use the below code to scale the background image to cover the whole div:

background-size: cover;

You can refer to these links for detailed information:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

https://caniuse.com/#feat=background-img-opts

http://jsfiddle.net/grc4/wGRD7/