Category background, title and image

Hi,
Thanks for your patience for the category background image with “Dandelion-post-background2.png” you can use this css:

.category .container_wrap_first {
  background: url(https://templeinacistg.wpenginepowered.com/wp-content/uploads/2025/03/Dandelion-post-background2.png) !important; 
  background-size: contain !important;
background-color: #f2f0eb !important;
}

but this image has a white background so adding a background color to the page will not show, if the image had a transparent background the background color would show.
To show the title you need to enable Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs ▸ Display only title, I did this for you:

To add the same background image and color to the post you could use this css:

.single .container_wrap_first {
  background: url(https://templeinacistg.wpenginepowered.com/wp-content/uploads/2025/03/Dandelion-post-background2.png) !important; 
  background-size: contain !important;
  background-color: #f2f0eb !important;
}

but you still need to use a tranpernt background image for the color to show.

Best regards,
Mike

Hi,
I disabled your Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs ▸ Display only title and added this to your code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 50, 1);
function avf_header_setting_filter_mod($header_settings) {
    if (is_tax() || is_archive()) {
        $header_settings['header_title_bar'] = "title_bar";
    }
    return $header_settings;
}

to only show the title on your category pages.
and I added this css:

.category .container_wrap_first {
	border: none;
}
.category .title_container {
	text-align: center;
	padding-top: 50px;
	background-color: #f2f0eb !important;
}
.category .title_container h1 a {
	font-weight: 600 !important;
	line-height: 1.3em;
	font-size: 30px;
}

so compared to one of you posts:

your category title looks like this:

But note that they are both H1, I don’t see H2 like you asked.

Best regards,
Mike

Hi,
The text below it is H2 “Poetry 5 Submission Title” are you sure that you want two H2 on the category page and no H1? It may affect your SEO.

Best regards,
Mike

Hi,
I added this css:

.category .title_container h1 a {
font-size: 300%!important;
line-height: 55px;
font-family: "sacramento", cursive;
font-weight: 400;
}

and this code to your to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($){
  $('#top.category .title_container h1.main-title.entry-title  a').contents().filter(function() {
    return this.nodeType == 3
  }).each(function(){
    this.textContent = this.textContent.replace('Archive for category:','');
    this.textContent = this.textContent.replace('Tag Archive for:','');
    this.textContent = this.textContent.replace('Archive for:','');
  });
  })(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );	  

the result now:

Please clear your browser cache and check.

Best regards,
Mike

Hi,
You want a 1500x1500px image under the category title?
1500px height would basically be full screen height, right?
Do you want the image under the title or the title to be overlayed on the image?
This will not be so easy.

Best regards,
Mike

Hi,
I did some more research as I had recalled the Categories Images plugin used to work, and I found that you also have to add a code snippet, so I added it to your archive.php file and uploaded a test image and it now works:

this is also full width of your content:

The category title image sits below the category title and above the post content.
Please check the link below.

Best regards,
Mike