Archived topic
Category image header CSS
8 replies · Started by dale on June 1, 2017
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:
Thoughts?
Look like the CSS is working? Can you link me to the actual page?
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;
}That resulted in this:
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.
Lost cause?
Yup that's just the nature of background images.
You would need to redesign that image to fit.
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.
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;
}Thanks! Looks great now.
Glad I could help!
