[Resolved] Category image header CSS

Home Forums Support [Resolved] Category image header CSS

Home Forums Support Category image header CSS

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #327376
    dale

    I was playing with category pages today and looked at some other questions in the support forum about changing the header image with this

    .category-xx .site-header {
    background-image: url(‘CUSTOM IMAGE URL’);
    }

    I tried it as,

    .category-chechnya .site-header {
    background-image: url(https://dalecameronlowry.com/wp-content/uploads/2017/06/chechen-rainbow-2000px.jpg
    );
    }

    and got this:

    category page header weird

    Thoughts?

    #327383
    Leo
    Staff
    Customer Support

    Look like the CSS is working? Can you link me to the actual page?

    #327388
    Leo
    Staff
    Customer Support

    Could try this:

    .category-chechnya .site-header {
        background-image: url(https://dalecameronlowry.com/wp-content/uploads/2017/06/chechen-rainbow-2000px.jpg);
        background-size: contain;
    }
    #327433
    dale

    That resulted in this:

    Second attempt

    So I added a couple lines:

    .category-chechnya .site-header {
    background-image: url(https://dalecameronlowry.com/wp-content/uploads/2017/06/chechen-rainbow-2000px.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #2b7338;
    }

    But my site logo still shows on top of it.

    thrid try

    Lost cause?

    #327439
    Leo
    Staff
    Customer Support

    Yup that’s just the nature of background images.

    You would need to redesign that image to fit.

    #327448
    dale

    Just to make sure we’re not miscommunicating — I don’t want the logo to show at all. I wanted this header to replace it.

    It’s okay if that’s not possible. Just want to be sure.

    #327454
    Leo
    Staff
    Customer Support

    Oh I didn’t know that you wanted to hide the logo on that page.

    Try this:

    .category-chechnya .site-logo .header-image {
        display: none;
    }
    #327511
    dale

    Thanks! Looks great now.

    #327513
    Leo
    Staff
    Customer Support

    Glad I could help!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.