resposive header image

  • Resolved stevebrett

    (@stevebrett)


    12 years, 3 months ago

    Im struggling trying to create responsive header image in a 2011 child theme.

    https://www.walkercreekmedia.com/wp/

    Using the css below I can’t get the background to align to the bottom of the div in safari. It stays up at the top of the div and so as you make the view port smaller the image re-sizes but floats up.

    Additionally I cant get the background to display at all in FF without an absolute height ( which is why i was trying to background-position: center bottom ??

    Ive tried height:100% and overflow:hidden; and in both cases the #branding div collapses and the header is gone.

    Any thoughts appreciated. Im stuck

    <header id=”branding” role=”banner”>
    <div id=”socialmedia” >
    <?php echo do_shortcode(‘[iire_social_icons]’);?>
    </div>
    </header>

    #branding {
    background-image:url(images/walker-creek-banner.gif);
    background-repeat:no-repeat;
    background-position: center bottom ;
    background-color: #DAD7D2;
    width:100%;
    height:224px;
    position:relative;
    }

    #socialmedia{
    position:absolute;
    bottom:60%;
    right:10px;
    z-index: 9999;
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Background-width isn’t a CSS property, use background-size (100%).

    Thread Starter stevebrett

    (@stevebrett)

    Thanks Andrew css blindness set in.- now it doesn’t resize at all in safari.

    #branding {
    background-image:url(images/walker-creek-banner.gif);
    background-repeat:no-repeat;
    background-position: center bottom ;
    background-color: #DAD7D2;
    background-size:100%;
    width:100%;
    height:224px;
    overflow:hidden;
    position:relative;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Then try;

    background-size:100% 100%;

    That’s the proper syntax for that property.

    Thread Starter stevebrett

    (@stevebrett)

    that then makes the image scale only horizontally it stays its original full height no doubt because of the explicit height:224px. Otherwise its pretty functional FF

    I remove the height: I get no header image at all.

    In safari I get no header image in any case

    Don’t use height,try to use float propriety.

    Thread Starter stevebrett

    (@stevebrett)

    Thanks Rosper, that set me on the right track.

    Best

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘resposive header image’ is closed to new replies.