Add Title attribute to Header Background Image as a Substitute for Alt Text

Astra Pro Addon offers the option to set a background image for the header. This image is added using CSS background-image Property. This property does not have an option to add an alt attribute to the image.

So as an alternative to the alt attribute, we can add a title attribute to the div. This will act as an alt text in the background-image property.

The following filter will add a title attribute to the div of the header, where the background image is added using CSS property.

add_filter( 'astra_attr_main-header-bar', 'astra_function_to_add_title' );

/**
 * Add Attribute to the Header.
 *
 * @param array $attr Default attributes.
 * @return array $attr Modified attributes.
 */
function astra_function_to_add_title( $attr ) {
    $header_bg_obj  = astra_get_option( 'header-bg-obj-responsive' );
    $image_alt_text = get_post_meta( attachment_url_to_postid( $header_bg_obj['desktop']['background-image'] ), '_wp_attachment_image_alt', true );
    $attr['title']  = $image_alt_text;
    return $attr;
}

Alt text added for image –

Alt text will appear as title for the image in HTML markup –