WordPress.org

Forums

Radiate
[resolved] Make header Image appear only on home Page (8 posts)

  1. cvine
    Member
    Posted 10 months ago #

    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

  2. cvine
    Member
    Posted 10 months ago #

  3. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    only appears on the home page

    #branding img {
        display: none;
    } 
    
    .home #branding img {
        display: block;
    }
  4. cvine
    Member
    Posted 10 months ago #

    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

  5. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    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.

  6. Andrew
    Nuh uh moderator
    Posted 10 months ago #

    Try this CSS:

    #parallax-bg {
        display: none;
    } 
    
    .home #parallax-bg {
        display: block;
    }
    
    #masthead {
        margin-bottom: 450px;
    }
    
    .home #masthead {
        margin-bottom: 50px;
    }
  7. cvine
    Member
    Posted 10 months ago #

    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!!

  8. ANC AS
    Member
    Posted 7 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic