Fit background image to div

html

responsive-design

background-image

css

byAlex Kataev·Feb 7, 2025

To fit a background image in a div while preserving the aspect ratio, utilize CSS background-size: cover; and background-repeat: no-repeat;. This combination will ensure your image covers the div and prevents repeated patterns.

.my-div {
  background-image: url('image.jpg');  /* this is where your image lives */
  background-size: cover;  /* magic word to make your image fit */
  background-repeat: no-repeat;  /* put those silly repeating patterns to rest! */
}

If you need the entire image to be visible without cropping, switch cover to contain. Always validate browser compatibility on caniuse.com and use vendor prefixes for broader support. For those stuck with Internet Explorer 8 or older, a filter fallback is needed.

The right fit for every situation

Showing the whole image

If showing your entire image matters, swap to using background-size: contain;. This guarantees that the image fits entirely within the div, but may leave some blank space:

.my-div {
  background-size: contain;  /* it's not a diet, just "contain" your image */
}

Responsive designs

When dealing with responsive designs, use media queries alongside background-size to make your background images adapt to various screens. Now that's what I call image-flexibility!

.my-div {
  background-image: url('image.jpg');  /* pic' your image */
  background-size: 100% auto;  /* image will behave and adjust as needed */
}

@media (max-width: 768px) {  /* magic happens on smaller screens */
  .my-div {
    background-size: cover;  /* your image full-width on small screens */
  }
}

Making it fit (no matter what)

To force your image to fit exactly into the div, regardless of aspect ratio, set both width and height to 100%. This may distort the image though, so tread lightly.

.my-div {
  background-size: 100% 100%;  /* STRICTLY no space wasted! */
}

Adding some old-school compatibility

Use vendor prefixes for some old versions of Chrome, Safari and Firefox. For those people who still use Internet Explorer (I know, right?), we need a proprietary fallback:

.my-div {
  background-image: url('image.jpg');  /* Trumpet announcement of your image */
  -webkit-background-size: cover;  /* old Chrome and Safari */
  -moz-background-size: cover;  /* old Firefox */
  background-size: cover;  /* every other modern browser */
}

For the legendary Internet Explorer 8 and below:

.my-div {
  background-image: url('image.jpg');  /* can you see your image here? */
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale')";  /* for the old folks at IE */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg', sizingMethod='scale');  /* just in case */
}

Enhancing performance and user experience

Optimizing images and loading times

Consider compressing your images for faster load times, and use lazy loading for off-screen images. Implement CSS sprites to group multiple images, reducing the number of HTTP requests.

Improving accessibility

Ensure any text over your backgrounds remains readable. To keep the background image fixed during scrolling, make use of background-attachment: fixed;.

.my-div {
  background-attachment: fixed;  /* because who likes moving backgrounds? */
}

Pro tips

Want a cool parallax effect? Combine background-attachment: fixed; with background-size: cover;.
More than one background image? Use comma separation for complex designs.
Test and tweak in a live environment like JSFiddle for hands-on learning and debugging.