1. Home
  2. Knowledge Base
  3. SmartTheme
  4. Blog category hero background image [SmartTheme]

Blog category hero background image [SmartTheme]

If you would like to add Hero background image to the Category pages in the Smart Theme, you can use the following CSS code to accomplish this. At the moment there is not a way to set this in the theme options, but we are looking into adding this as a setting >> Custom Scripts” within a CSS box.

Just be sure to change the background image URL and theoun backgrd-color. You can use colorpicker.com to help find the rgb color. The “0.5” in rgba(0,0,0,0.5); is the opacity which can be adjusted as well.

 in a future update.

Just drop the following CSS code under "Appearance >> Theme Options.category .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.category .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

If you want a different hero image for each cateogry, you may use the following CSS:

Note that the CSS class .category-another-testing-category includes the slug for the category. So if your category slug (permalink) is funny-cat-tricks then the CSS class would be .category-funny-cat-tricks instead of .category-another-testing-category.

.category-another-testing-category .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.category-another-testing-category .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Also, here are a couple more CSS snippets in case you want to add a hero image for the Search Results and 404 error pages:

/* search results page hero section */
.search-no-results .op-blog-header-content, .search-results .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.search-no-results .op-blog-post-header, .search-results .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/* 404 page hero section */
.error404 .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.error404 .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support