Responsive background for header only

  • Resolved katemgilbert

    (@katemgilbert)


    11 years, 1 month ago

    I am using the Responsive theme. I want to set a full-width responsive background image for the header area only. I have managed to get the image positioned and responsive, but the CSS height parameter is still giving me trouble. If I don’t set a height, the header cuts off the image at the logo height. If I set the fixed height of the image at full width, on mobile viewing the content is pushed way down the screen.

    See https://akashastudiojp.com/wp for the work-in-progress

    Here’s my CSS (all in a child theme):

    body.home #header img { width: 100%; max-width: 100%;}

body.home #header { z-index: 0; background: url(https://www.akashastudiojp.com/wp/wp-content/uploads/2013/10/background-1.png) no-repeat; background-size: 100%; background-position:center; width: 100%; max-width: 100%; height: 920px; min-height: 215px;}

    I know height and min-height conflict with each other, but I wish they could run concurrently. Or max-height and min-height at the same time, to govern desktop viewers and phone viewers.

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

  • Hi

    Try look at this guide:
    https://css-tricks.com/perfect-full-page-background-image/

    That should do the trick ??

    Thread Starter katemgilbert

    (@katemgilbert)

    Thanks for your reply but that does not help me. I want the background image to end at its proportional height, so that content coming after has a solid color background image. I tried the fix you recommended and it stretches the image to cover the whole background. I want to be able to scroll past the image vertically.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Please re-add your header image.

    Thread Starter katemgilbert

    (@katemgilbert)

    Okay I just re-added it. Thanks for any suggestions you can provide!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you re-explain what you want to happen?

    Thread Starter katemgilbert

    (@katemgilbert)

    Sure. I want the homepage to have a full-width responsive image at the top, behind the logo and nav. After the image is over, page content will begin. This makes the image fixed, meaning that when my users scroll to read the page content, they are not carrying the content up and over the image, but rather scrolling down a long front page.

    Right now it looks right on a desktop sized screen. But if you look at it on a phone, you’ll see the header container is way too tall, and the image is floating in the middle of it. If I set a min-width for that container to the mobile height of the image, then on the desktop the content overlaps 3/4 of the image.

    Trying to get the image to display at ITS full height while stretching to the SCREEN’s full width. With the contents of the header container overlaid on top. That’s why it’s a background.

    Hope that helps make more sense of my problem… Thanks!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you thought about resizing the header using media queries (targeting smaller screens)?

    Thread Starter katemgilbert

    (@katemgilbert)

    Thank you! I ended up using CSS media queries, customizing the snippet posted here:

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Responsive background for header only’ is closed to new replies.