[kimagine]

I apologize in advance if I’m not wording things correctly. 🙂

I used the custom CSS snippet from another forum post to change the background image for my Blog Post and Product Pages:

body.single-product .zass_title_holder {
background-image: url(https://kimagine.com/webstore/wp-content/uploads/2020/10/rose-overlay-BACK-10.jpg);
background-size: cover;
background-repeat:none;
}
body.single-product .zass_title_holder h1.heading-title, body.single-product .zass_title_holder .breadcrumb, body.single-product .zass_title_holder .breadcrumb a {
color: #ffffff !important;
}

I would like to do the same for the Category pages, but I can’t figure out what they are called, CSS-wise. And by Category pages, I mean the pages that come up when you’ve clicked on one of the categories in the slider, that show all of the products in that selected category.

Thanks!

[Althemist]

Hello Kimagine,

Yes, it can be done with CSS, but especially for the product categories it’s not really needed. We have a custom option for this and you can assign image background for each individual category in it’s settings.

[kimagine]

Thanks for the reply!

I tried that, and while it did work I noticed that the image area between the torn paper effect was larger than the pages that I used the CSS – even though I used the same image. I like the smaller strip.

Here’s a single post page that has the smaller image area: https://kimagine.com/webstore/product/enameled-spoon-pendant/

And here’s what happens when I add that same background in the category section: https://kimagine.com/webstore/product-category/unique-unusual/

Would you be able to tell me how to do it with CSS?

[Althemist]

Yes, when there is an image background, the title become slightly taller, in order to show more of the image.

You can do it with CSS, but if it’s the same image on all categories may be the CSS approach to assign the image would be better as you’d only need to do it once.

CSS to make the title on categories smaller:

body.tax-product_cat .zass_title_holder.title_has_image .inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

[kimagine]

Thanks so much, that did the trick!

And thank you for making such a lovely theme, I’m very pleased with my website. 🙂

[Author]

Posts