Want Header Image to Shrink & Grow with Browser Size

Hi,
I’m trying to get an image in a header to occupy the full width of the browser window and to shrink/grow as needed to fill the available space. An example of the desired behavior is here:
http://www.nabluebirdsociety.org/

However, on my site I can’t seem to get the right combination of parameters to get this behavior.
https://socalbluebirds.org/caring-for-bluebirds/
With my current configuration the graphic doesn’t fill the space horizontally when the browser width is big. The graphic also doesn’t shrink & grow as I resize the browser.

Can you provide me with some guidance on how to get the desired behavior?

Hi @WPDave,

Thanks for writing to us,

I checked the site and I found that you have set max-width 937px of bar container and the Image element width 1000px. Kindly set max-width none of bar container and width auto in the Image element.


sattya-Headers-Pro (1)

Hope it helps you.
Thanks

Prakash,
Thanks so much for your quick, helpful reply! It was exactly the information I needed.
Regards,
Dave

You’re welcome @WPDave !
We’re glad @Prakash_s were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.