Support » Themes and Templates » resposive header image

  • Resolved stevebrett

    (@stevebrett)


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

    http://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)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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;
    }

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Then try;

    background-size:100% 100%;

    That’s the proper syntax for that property.

    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

    rosper

    (@rosper)

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

    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.