How to make custom header image responsive

Viewing 5 replies - 1 through 5 (of 5 total)
  • byanofsky

    (@byanofsky)

    11 years, 7 months ago

    To make it completely responsive, make the background-size: 100%;

    But you’ll notice that this also adjusts the height. So you’ll probably need to play with the height of the header-wrap as well.

    Thread Starter mysterysolver

    (@mysterysolver)

    11 years, 7 months ago

    if i make the background size 100% i get a huge white space under the header image

    byanofsky

    (@byanofsky)

    11 years, 7 months ago

    Correct. That is why you need to adjust the header height as well. It might be easier instead of using a background image to insert an actual html image there.

    Thread Starter mysterysolver

    (@mysterysolver)

    11 years, 7 months ago

    what do you mean by html image ?
    can you show me a example ?

    byanofsky

    (@byanofsky)

    11 years, 7 months ago

    It would be your usual HTML image, such as <img src="" />. This would require some custom coding in the theme.

    But any time you have a responsive image, it will adjust both widget and height as the screen size becomes smaller, otherwise the aspect ratio will change and it will warp.

    Putting an HTML image there will allow you to set the height of the header to auto and it will adjust to the height of the image. But this can get complex and open up a whole other can of worms.

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

The topic ‘How to make custom header image responsive’ is closed to new replies.