Simfo Header image full width of page

Home Forums Automattic Simfo Simfo Header image full width of page

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #111911 Resolve

    tqapp

    Hi Guys,

    Here is a great one!

    I want to stretch my image on theme Simfo to touch both sides of the screen – like this website beautifully does – http://lookbook.nu/blog

    I assume I will need to use CSS…so how/ what code do I need to do this?

    My blog is http://blog.trendquarter.com

    Any help would be much appreciated :)

    The blog I need help with is blog.trendquarter.com
    #152956

    Sheri

    That’s actually a bit of a tricky request.

    Here’s one possible solution you might try out. It hides the original header image and instead sets up the container element for the header image with a background image using custom CSS (this overrides the Appearance > Header settings) and uses a CSS3 property called background-size to stretch the image to fit into the space (centered) no matter the width of the browser. I think it looks pretty cool, but not everyone likes how the background-size property works. Here’s what I came up with in case you’d like to try it out!

    #page,
    #masthead {
    position: static;
    }

    .site-header-image > a > img {
    display: none;
    }

    .site-header-image > a {
    position: absolute;
    left: 0;
    top: 110px;
    width: 100%;
    height: 400px;
    background: url(http://blogdottrendquarterdotcom.files.wordpress.com/2014/06/luxury-homes-geneva-switzerland-adelto_09.jpg) center no-repeat;
    background-size: cover;
    }
    .main-navigation {
    margin-top: 430px;
    }

    Kinda fun. :)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.