[Resolved] Adding custom images as header background for categories

Home Forums Support [Resolved] Adding custom images as header background for categories

Home Forums Support Adding custom images as header background for categories

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1649435
    William

    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

    #1649477
    Leo
    Staff
    Customer Support

    Hi Will,

    Thanks sharing!

    Using the CSS filer should be a good method 🙂

    #1649503
    William

    Thanks Leo – only issue is I have no idea where to put it, as the background-image is not a div element?

    #1649530
    Leo
    Staff
    Customer Support

    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.

    #1649557
    William

    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?

    #1649581
    Leo
    Staff
    Customer Support
    #1649593
    William

    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?

    #1649600
    Leo
    Staff
    Customer Support

    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.

    #1650239
    William

    I want to blur just the background – the the circular profile picture image, title, or what you have in red.

    #1650459
    David
    Staff
    Customer Support

    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);
    }
    #1650472
    William

    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?

    #1650535
    David
    Staff
    Customer Support

    Aah yes – add an overflow: hidden; to the pseudo element CSS.

    #1650596
    William

    Absolutely amazing – thank you so much. I appreciate you all and your theme so much!

    #1650629
    David
    Staff
    Customer Support

    You’re welcome – glad we could be of help

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