Responsive Header image

  • flatrock

    (@flatrock)


    9 years, 11 months ago

    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!

    http://www.marbleheadhistory.org/Mhead1629

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

    (@jaycbrf)

    9 years, 11 months ago

    Change background-size to “cover”

    Thread Starter flatrock

    (@flatrock)

    9 years, 11 months ago

    no go, but thanks.

    Theme Author Styled Themes

    (@gejay)

    9 years, 11 months ago

    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.
    http://prntscr.com/bgm6i0

    Thanks

    Thread Starter flatrock

    (@flatrock)

    9 years, 7 months ago

    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?

    http://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.