OptimizePress Smart Theme Blog Category Hero Background Image

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 in a future update.

Just drop the following CSS code under "Appearance >> Theme Options >> Custom Scripts" within a CSS box.

Just be sure to change the background image URL and the background-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.

.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;
}