Fit background image to div

html css background-image
Rajeev picture Rajeev · Nov 20, 2011 · Viewed 565.3k times · Source

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

grc picture grc · Nov 20, 2011

You can achieve this with the background-size property, which is now supported by most browsers.

To scale the background image to fit inside the div:

background-size: contain;

To scale the background image to cover the whole div:

background-size: cover;

JSFiddle example

There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.

Related questions

CSS Display an Image Resized and Cropped

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I …

Read More
How to completely remove borders from HTML table

My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures. This is my code: <table> <tr> &…

Read More
100% width background image with an 'auto' height

I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to …

Read More