HTML CSS – How to Fit Background Image to Div

background-imagecsshtml

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?

Best Answer

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 or runnable snippet:

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}

<div id="imagecontainer"></div>

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

Related Solutions

How to Size a DIV to the Background Image in CSS

CSS can't do this, the div gets its dimensions from the content within it. The background image is purely a mark of styling.

You should be able to do this with Javascript, finding the height and width values and injecting them into an inline style should do it :)

You can also use an <img> tag within the .logo div. This would produce what you intend.

HTML CSS – Scale Div to Fit Background Image

Let a transparent image dictate the DIV dimensions.
Inside that div put the same image with CSS opacity: 0

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
</div>

set that image to

#mainHeaderWrapper {
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper img {
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}

That way the height of the DIV will be dictated by the containing invisible image, and having the background-image set to center, full (50% / 100%) it will match that image's proportions.

Need some content inside that DIV?

Due to the containing image, you'll need an extra child element that will be set to position: absolute acting as an overlay element

<div id="mainHeaderWrapper">
   <img src="path/to/image.jpg"><!-- I'm invisible! -->
   <div>Some content...</div>
</div>

#mainHeaderWrapper{
    position: relative;
    background: no-repeat url(path/to/image.jpg) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

Best Answer

Related Solutions

How to Size a DIV to the Background Image in CSS

HTML CSS – Scale Div to Fit Background Image

Need some content inside that DIV?

Related Question