WordPress.org

Support

Support » Themes and Templates » [Resolved] Make header Image appear only on home Page

[Resolved] Make header Image appear only on home Page

  • I see many have had this question with no answer… what custom css can you add so that the header image only appears on the home page and not posts/pages??

    ayminor.com

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

    @anevins

    Forum moderator

    only appears on the home page

    #branding img {
        display: none;
    } 
    
    .home #branding img {
        display: block;
    }

    sorry for the delayed response — should I be able to add that to the custom css page?

    I did and it didn’t work…

    http://www.ayminor.com/wp-content/uploads/2014/07/Screen-Shot-2014-07-05-at-11.12.17-PM.png

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Okay so you’re using a plugin for your header image?

    Edit: Sorry I didn’t see your link in your original post so I looked at the thread you linked, I went into one of the poster’s websites instead and recommended CSS for that. Maybe that website wasn’t using the Radiate theme.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try this CSS:

    #parallax-bg {
        display: none;
    } 
    
    .home #parallax-bg {
        display: block;
    }
    
    #masthead {
        margin-bottom: 450px;
    }
    
    .home #masthead {
        margin-bottom: 50px;
    }

    I totally forgot that I had tried a plug-in (which wasn’t working properly).

    I deactivated the plugin and tried the css above, but it has the opposite effect I was looking for. Tweaked the css to this and it worked!!

    #parallax-bg {
    display: none;
    }

    .home #parallax-bg {
    display: block;
    }

    #masthead {
    margin-bottom: 50px;
    }

    .home #masthead {
    margin-bottom: 450px;
    }

    Thank you for your help!!

    Just wanted to add to this:

    I have found that the above mentioned code does not work correctly for me as I had an image specific height. I have found that using the :not() css-selector is better.

    The code I used was:

    #parallax-bg {
    	display: none;
    }
    
    .home #parallax-bg {
    	display: block;
    }
    
    .page:not(.home) #masthead {
    	margin-bottom: 50px;
    }

    Hope this helps others who might have had the same issue as I had.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Make header Image appear only on home Page’ is closed to new replies.