Fit Background Image to Div

Fit background image to div

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.

Dynamically resize div for background image

The div will not expand to accommodate the background image. If you always want to show the full image and have it expand with the div, you can sort of fake the background by using an image tag and some sneaky positioning instead.

img.header-image {    width: 100%;    height: 100%;}
div.header-wrapper { position: relative;}
div.header-contents { position: absolute; width: 100%; top: 0; color: #ffffff;}
<div class="header-wrapper">    <img class="header-image" alt="Cat Background" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR39_wPEnBeSEOiHXW1Lc0rwqhEVktULcqnvDDA4J-DZL0gndic" />    <div class="header-contents">Here are some header contents.</div></div><div class="body-contents">And some regular content.</div>

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

CSS background image - shrink to fit fixed size div

You're looking for background-size: contain (see the MDN entry), not cover. To get your example to work, you'll have to drop the background-attachment: fixed. Use background-position: center to center the background in your div.

.container{    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;    -webkit-background-size: contain;    -moz-background-size: contain;    -o-background-size: contain;    background-size: contain;        height: 150px;    width: 300px;}
<div class="container"></div>

Fit background image on div element with dynamic width

You simply need to adjust the value of background. In your case, it should be 2x the size of the red box then adjust the position to bottom/right to have the D and top/left for the A and so on:



Leave a reply



Submit