Simfo Header image full width of page

Home › Forums › Automattic › Simfo › Simfo Header image full width of page

Tagged: , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 23, 2014 at 2:10 pm #111911 Resolve

    tqapp
    Member

    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
    June 23, 2014 at 9:35 pm #152956

    Sheri
    Member

    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. :)

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

You must be logged in to reply to this topic.