Search code examples
cssimagewebimage-resizing

Resizing Header Image to Fit Screen Size

I am trying to get the header image of my new website (using WordPress) to resize automatically dependent on what type of device I am viewing from. I have tried to implement additional CSS from other people's suggestions but nothing seems to work for me. When viewing on a desktop, I am happy with how it looks but viewing from a phone does not look good.

Please help! My website is:

maximizingchange.com

Thank you!

Solution

  • As per your code, you are using background-image for your header. Try adding the below lines in your additional CSS section to fix it.

    @media (max-width: 991px) { 
    #masthead.header-image{
      padding: 30px 0;
      background-repeat: no-repeat;
      background-size: contain;
      background-attachment: fixed;
      background-position: initial;
    }
}