Title: Responsive background image sizes?
Last modified: September 1, 2016

---

# Responsive background image sizes?

 *  [jordanwebdev](https://wordpress.org/support/users/jordanwebdev/)
 * (@jordanwebdev)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/)
 * Hi everyone. I apologize if this is in the wrong spot- I really didn’t know where
   to put it.
 * I know an earlier version of WordPress introduced responsive images in terms 
   of sizes and srcset, so that the browser can make intelligent decisions on what
   image to load. I am wondering if this still works for background images. I am
   not able to see a natural image size in the console for background images.
 * So does this only work for <img> tags or for any ol’ <div> with a background 
   image, too?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/#post-7493539)
 * It’s only for image tags.
 *  Thread Starter [jordanwebdev](https://wordpress.org/support/users/jordanwebdev/)
 * (@jordanwebdev)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/#post-7493545)
 * Oh, that’s unfortunate. Are there any workarounds? Sometimes, it’s much easier
   to style an image if it’s a background. You have nice options like background-
   size: cover and contain.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/#post-7493611)
 * The “Responsive images” term isn’t really about responsive images, it’s about
   bandwidth. I don’t think that has anything to do with what you want to achieve.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/#post-7493612)
 * You’re comparing apples and oranges; HTML5 introduced responsive images on the‘
   <img>’ element; whereas you want to use CSS to swap out images. You can surely
   do this yourself using CSS, The W3C do not have to develop special functionality
   for this.
 * Simple example:
 *     ```
       .foo {
           background: url('small-foo.png');
       }
   
       @media screen and (min-width: 400px) {
           .foo {
               background: url('medium-foo.png');
           }
       }
   
       @media screen and (min-width: 800px) {
           .foo {
               background: url('large-foo.png');
           }
       }
       ```
   
 * But WordPress, as a Content Management System, shouldn’t have to incorporate 
   CSS responsive background images – This is the choice of the plugin or theme 
   developer.
 *  Thread Starter [jordanwebdev](https://wordpress.org/support/users/jordanwebdev/)
 * (@jordanwebdev)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/#post-7493642)
 * Thanks for that suggestion. Sorry to bother, but I’m having an issue with that
   method.
 * Here’s the div I’m using to hold my background image:
 * `<div class='img-wrap' style='background: url(<?php echo the_post_thumbnail_url('
   medium' ); ?>) 50% 0% no-repeat; background-size: cover'></div>`
 * I would expect this to grab the 300×300 image, but it goes to the default full
   sized one instead. I checked the uploads folder, and there has indeed been a 
   300×300 version generated. Any clue why it’s not working?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Responsive background image sizes?’ is closed to new replies.

## Tags

 * [images](https://wordpress.org/support/topic-tag/images/)
 * [sizes](https://wordpress.org/support/topic-tag/sizes/)
 * [srcset](https://wordpress.org/support/topic-tag/srcset/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 2 participants
 * Last reply from: [jordanwebdev](https://wordpress.org/support/users/jordanwebdev/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-background-image-sizes/#post-7493642)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics