Archived topic
Adding custom images as header background for categories
13 replies · Started by William on February 7, 2021
Hi there,
Okay so I was halfway through asking this question, but have somehow managed to actually fix it and create a solution - so maybe this might be useful in the future as there does not seem to be the easiest methods for this: how to have custom images for background on category pages. See the page for all this code here. (I do have a question at the end though)
The first thing I did was create an ACF custom field for an image on taxonomies, making sure it is to return a URL
I then created a snippet so that there is a shortcode I can use being [category_background_image]:
add_shortcode( 'category_background_image', function() {
$category_id = get_the_category(get_the_ID());
$category = get_category($category_id[0]->term_id);
$category_background_image = get_field( 'category_background_image', $category );
$category_background_image_html = $category_background_image;
return $category_background_image_html;
} );I then added this CSS on the header element for the category:
<style>
.page-hero {
background-image:url('[category_background_image]');
background-size: cover;
background-position: center center;
}
/* Linear gradient background */
.page-hero, .inside-page-hero {
position: relative;
}
.page-hero:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255,0);
background: linear-gradient(0deg, rgba(20,20,20,0.7),rgba(20,20,20,0.5));
}
</style>Which links the background image shortcode, and also adds a nice linear gradient.
Hope this helps. One thing I can figure out is adding a blue effect to the image, such as filter: blur(5px); for the background image - is there a way to do this/what's the best way? Page in question being this one.
Many thanks,
Will
Hi Will,
Thanks sharing!
Using the CSS filer should be a good method :)
Thanks Leo - only issue is I have no idea where to put it, as the background-image is not a div element?
Does something like this help?
https://www.w3schools.com/howto/howto_css_blurred_background.asp
This isn't a theme specific question so you can try Googling "Adding blur to background image" and see lots of examples and different method.
Of course, I think I just about understand how to do the blur. The problem is that there is no class to apply to this in the header element - is it possible with GeneratePress to add CSS to an image upload for a background so the image itself can be modified, without modifying the contents appearing in front of it?
Not 100% sure if I understand but is this what you are looking for?
https://www.screencast.com/t/9MDjPVfO7VKN
https://www.screencast.com/t/YytS3VFt
That seems to cause the whole page-hero to create a blur, including the text.
If there is a way to blur the whole page.hero except for the text, that is what I am after.
This would be easy if the background had a div element, or some sort of class that I can add the filter: blur(5px); to?
Hmm still a little bit confused.
So blur the whole thing except the red box here?
https://www.screencast.com/t/z0YgWiRYxfB
Unfortunately I don't think there is a way to do that.
I want to blur just the background - the the circular profile picture image, title, or what you have in red.
Hi there,
filter properties applied to the Container will affect everything within the container.
So to Blur just the Background Image it would need to be in its own element.
You could use a Pseudo Element to output the image and position it behind the page-hero:
.page-hero,
.page-hero .inside-page-hero {
position: relative;
}
.page-hero::before {
background-image: url('your_background_image_url');
background-size: cover;
background-position: center center;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(5px);
}That's amazing thank you!
This is exactly what I needed - the only issue is there is a bit of blur leakage around the header element - is there a way to remove this?
Aah yes - add an overflow: hidden; to the pseudo element CSS.
Absolutely amazing - thank you so much. I appreciate you all and your theme so much!
You're welcome - glad we could be of help
