Media Queries for Sample image in Minimum Theme

[ChelleParticipant Post count: 4]

I’m using the Minimum child theme and placed a 1600×600 image (sample.jpg) in the featured image area on the home page.  However, when the width of the browser (or device) decreases to 600px or less, the image text is difficult to read.

I would like to replace that image at the 600px break point and possibly at 300px.  I’ve tried adding a media query with the new image at max-width 600px, but the new image does not display.  I believe it’s because the 600px image is in the background vs. foreground.

#featured-image img .resp {
background: url(images/sample_600.jpg) no-repeat;
}
I did try using z-index to pull the new image to the front, but I couldn’t get that to work either.  Any thoughts on how I can replace that featured image at different breakpoints?  I feel like I’m missing something obvious.

Site: http://jsr.bloglex.com

Many thanks for your help!

[cehwithamParticipant Post count: 353]

Hi Chelle,

The link to your website doesn’t seem to be working. If you can provide a working link then I’d be happy to take a look at this for you.

Chris

---

Twitter: cehwitham Web: cehwitham.com

[ChelleParticipant Post count: 4]

Hi Chris,

Try this one: http://jumpswimrun.com.

Thanks,

Chelle

[cehwithamParticipant Post count: 353]

Hi Chelle,

This link works.

You can’t swap an actual image for a background image using media queries.

What you’d need to do is set the current image to display:none then set the 600px image as the background for #feature-image (you may also need to set a height on it too). However this will mean that alt text isn’t available at smaller sizes.

Another way to do it would be to insert all 3 images as img and then only have one set to display at each media query break point.

I hope that helps.

Chris

---

Twitter: cehwitham Web: cehwitham.com

[ChelleParticipant Post count: 4]

Thanks Chris.  At least I’m not crazy.  Thought I was missing something obvious here.

Many thanks for taking the time to check on it:-)

Chelle

[cehwithamParticipant Post count: 353]

No problem. It’s always handy having a second set of eyes on something like that.

I hope you get it sorted.

Chris

---

Twitter: cehwitham Web: cehwitham.com

[Author]

Posts