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
  • #111911 Resolve


    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 –

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

    My blog is

    Any help would be much appreciated :)

    The blog I need help with is


    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!

    #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( 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.