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:
#content { position: relative; max-width: 50%; height: 0; margin: 0 auto 0 auto; padding: 0 0 50% 0;}
.icon-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("https://i.stack.imgur.com/4FzW2.png") bottom right/200% 200% no-repeat;}
<div id='content'> <div class='icon-1'> </div></div>
How to stretch the background image to fill a div
Add
background-size:100% 100%;
to your css underneath background-image.
You can also specify exact dimensions, i.e.:
background-size: 30px 40px;
Here: JSFiddle
Related Topics
Transform: Translate(-50%, -50%)
Base64 Png Data to HTML5 Canvas
Using :Before and :After CSS Selector to Insert HTML
Document.Body.Scrolltop Is Always 0 in Ie Even When Scrolling
CSS Side by Side Div's Auto Equal Widths
Are Empty HTML5 Data Attributes Valid
What Is It When a Link Has a Pound "#" Sign in It
How to Center an Element in the Middle of the Browser Window
How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar
How to Make Scrollable Table with Fixed Headers Using CSS
Css3 Transition Doesn't Work with Display Property
Required Attribute Not Work in Safari Browser
How to Post/Submit an Input Checkbox That Is Disabled
How to Put Text Over Images in HTML