Responsive Header image

  • Still having some difficulty getting the Header image to be FULLY responsive, on both mobile and desktop situations.
    I could set the CSS width to 100% but all I get is a distortion of the image horizontally only. Is there a way to make the entire image respond equally?

    .header-bg {
    height: 260px;
    padding: 0 0;
    background-size: 100% 100%
    }

    I tried this too, to no avail;

    .header-bg {
    height: 100%;
    padding: 0 0;
    background-size: 100% 100%
    }

    The logo option works fine, and is responsive, but I need to have varying header images per page, so the only option there is using Header images, not logo images.

    Any advice is very much appreciated!

    https://www.marbleheadhistory.org/Mhead1629

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

  • Change background-size to “cover”

    Thread Starter flatrock

    (@flatrock)

    no go, but thanks.

    Theme Author Styled Themes

    (@gejay)

    Hi There,

    As it is background image it is responsive, due to the responsiveness the image has been compressed and if you remove the responsiveness then your image can be cut off in mobile and tablets. And we have kept the code like this to make it responsive;

    .header-bg {
    background-size: 100% 100%;
}

    And if you reduce or remove the code then you image looks like the attached image. We hope you understand.
    https://prntscr.com/bgm6i0

    Thanks

    Thread Starter flatrock

    (@flatrock)

    Still struggling with this, hope you can help? The Header image is still only responsive in one direction using the following CSS

    .header-bg {
    background-size: 100% 100%;
    }

    What can I do to make it fully responsive in both x and y axis? Is there something in the header.php or logo-group.php files I can adjust too?

    https://www.marbleheadhistory.org/Mhead1626 is the site in progress, thanks for any help!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive Header image’ is closed to new replies.