It’s not clear where the image is supposed to appear or what type of template is in use, but generally, whether in Elementor or any WordPress taxonomy archive, an image can be added to CSS specific to a taxonomy term like below, where the taxonomy is category
, the field name is background_image
, and the CSS selector is h1.wp-block-query-title
:
<?php
/**
* Add a background image to CSS on a category archive from field background_image.
*/
add_action(
'wp_head',
function() {
// If this is not a category archive, do nothing.
if ( ! is_category() ) { return; }
$attachment_id = get_term_meta(
get_queried_object()->term_id,
'background_image',
true
);
// If there is no image set in the category term field, do nothing.
if ( empty( $attachment_id ) ) { return; }
// $attachment will contain an array of URL, width, height.
// The image size is 'large'.
$attachment = wp_get_attachment_image_src( $attachment_id, 'large' );
// Output a stylesheet with the URL and a minimum height based on the image dimensions.
// In printf/sprintf syntax, if a literal % sign is desired, it would be %%.
printf(
<<<'TEMPLATE'
<style>
h1.wp-block-query-title {
background-image: url( %s );
background-repeat: no-repeat;
background-size: cover;
min-height: %dpx;
}
</style>
TEMPLATE,
esc_url( $attachment[0] ),
intval( $attachment[1] )
);
},
PHP_INT_MAX
);