Backstretch Image Not resizing with browser

Hey Paolo,

Thanks for responding.

The background image I’m referring to is the “Home Background” image under …
Appearance > Customize > Home Background

I need it to be responsive and resize depending on the viewport size. The only class I see is backstretch

Backstretch is jQuery that dynamically-resizes background images. The image will stretch to fit the page, and will automatically resize as the window size changes. I’m not really familiar with it other than knowing it exists. I guess it would be similar to the effect of using “background-size: contain;”??

It’s nothing I installed. It’s part of your theme. Uses a class of “.backstretch”.

After some poking around I read a couple “solutions” but none that seemed to work for me.

1. Maybe jQuery is being called twice. (I don’t know how to tell)
2. Using the following to target the different min-widths and min-heights…

@media (min-width:800px) {.backstretch {
   min-height: 400px!important;
}}
@media (min-width:1000px) {.backstretch {
   min-height: 450px!important;
}}
@media (min-width:12px) {.backstretch {
   min-height: 500px!important;
}}

Anyway, the image does cover the background but it does not resize depending on view port size. I was hoping you or someone on your team could help 🙂