{"id":31618,"date":"2019-04-16T00:00:00","date_gmt":"2019-04-15T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=31618"},"modified":"2022-02-24T02:29:09","modified_gmt":"2022-02-23T20:59:09","slug":"title-attribute-in-header-background-image","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/title-attribute-in-header-background-image\/","title":{"rendered":"A\u00f1adir el atributo T\u00edtulo a la imagen de fondo de la cabecera como sustituto del texto Alt"},"content":{"rendered":"<p><strong>Complemento Astra Pro<\/strong> ofrece la opci\u00f3n de establecer una imagen de fondo para la cabecera. Esta imagen se a\u00f1ade mediante CSS <em>imagen de fondo<\/em> Propiedad. Esta propiedad no tiene una opci\u00f3n para a\u00f1adir un <g class=\"gr_ gr_22 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep gr-progress\" id=\"22\" data-gr-id=\"22\"><strong class=\"\">alt<\/strong><\/g><strong> <\/strong>a la imagen.<\/p>\n\n\n\n<p>As\u00ed que como alternativa al <strong>alt <\/strong>podemos a\u00f1adir un atributo <strong>t\u00edtulo <\/strong>al div.  Esto actuar\u00e1 como un <strong>alt <\/strong>texto en el <em>imagen de fondo<\/em> propiedad. <\/p>\n\n\n\n<p>El siguiente filtro a\u00f1adir\u00e1 un <strong>t\u00edtulo <\/strong>al div de la cabecera, donde se a\u00f1ade la imagen de fondo mediante la propiedad CSS.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>add_filter( 'astra_attr_main-header-bar', 'astra_function_to_add_title' );\n\n\/**\n * Add Attribute to the Header.\n *\n * @param array $attr Default attributes.\n * @return array $attr Modified attributes.\n *\/\nfunction astra_function_to_add_title( $attr ) {\n    $header_bg_obj  = astra_get_option( 'header-bg-obj-responsive' );\n    $image_alt_text = get_post_meta( attachment_url_to_postid( $header_bg_obj&#91;'desktop']&#91;'background-image'] ), '_wp_attachment_image_alt', true );\n    $attr&#91;'title']  = $image_alt_text;\n    return $attr;\n}<\/code><\/pre>\n\n\n\n<p>Texto Alt a\u00f1adido para la imagen - <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-alternative-text.png\"><img decoding=\"async\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-alternative-text.png\" alt=\"Alternative Text\" class=\"wp-image-39789\"\/><\/a><\/figure><\/div>\n\n\n\n<p>El texto Alt aparecer\u00e1 como t\u00edtulo de la imagen en el marcado HTML - <\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-title-text.png\"><img decoding=\"async\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-title-text.png\" alt=\"Title Text\" class=\"wp-image-39790\"\/><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>Astra Pro Addon ofrece la opci\u00f3n de establecer una imagen de fondo para la cabecera. Esta imagen se a\u00f1ade utilizando la propiedad CSS background-image. Esta propiedad no tiene una opci\u00f3n para a\u00f1adir un atributo alt a la imagen. As\u00ed que como alternativa al atributo alt, podemos a\u00f1adir un atributo title al div. Este [...]<\/p>","protected":false},"author":34,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[2110],"docs_tag":[],"class_list":{"0":"post-31618","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-astra-header-footer-filters"},"spectra_custom_meta":{"_wp_old_slug":["filter-to-add-title-tag-to-header-background-image|filter-to-add-title-tag-to-header-background-image|title-tag-in-header-background-image","filter-to-add-title-tag-to-header-background-image|filter-to-add-title-tag-to-header-background-image|title-tag-in-header-background-image","filter-to-add-title-tag-to-header-background-image|filter-to-add-title-tag-to-header-background-image|title-tag-in-header-background-image"],"_wp_page_template":["default"],"wpil_links_inbound_internal_count_data":["a:2:{i:0;a:9:{s:3:\"url\";s:80:\"https:\/\/git-staging.wpastra.com\/docs\/title-attribute-in-header-background-image\/\";s:8:\"url_real\";s:80:\"https:\/\/git-staging.wpastra.com\/docs\/title-attribute-in-header-background-image\/\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";s:5:\"37583\";s:6:\"anchor\";s:7:\"See Doc\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:13:\"Version 1.8.5\";}i:1;a:9:{s:3:\"url\";s:80:\"https:\/\/git-staging.wpastra.com\/docs\/title-attribute-in-header-background-image\/\";s:8:\"url_real\";s:80:\"https:\/\/git-staging.wpastra.com\/docs\/title-attribute-in-header-background-image\/\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";s:5:\"38914\";s:6:\"anchor\";s:7:\"See Doc\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:25:\"Changelog for Astra Theme\";}}"],"wpil_links_outbound_internal_count_data":["a:2:{i:0;a:9:{s:3:\"url\";s:85:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-alternative-text.png\";s:8:\"url_real\";s:85:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-alternative-text.png\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";i:0;s:6:\"anchor\";s:128:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-alternative-text.png\" alt=\"\" class=\"wp-image-39789\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}i:1;a:9:{s:3:\"url\";s:79:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-title-text.png\";s:8:\"url_real\";s:79:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-title-text.png\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";i:0;s:6:\"anchor\";s:122:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-title-text.png\" alt=\"\" class=\"wp-image-39790\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}}"],"wpil_links_outbound_external_count_data":["a:0:{}"],"_edit_lock":["1645649951:77"],"_edit_last":["77"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["60"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["2"],"wpil_links_outbound_internal_count":["2"],"wpil_links_outbound_external_count":["0"],"wpil_sync_report2_time":["2019-09-05T12:01:36+00:00"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_yoast_wpseo_title":["How to Add Title Attribute to Header Background Image as a Substitute for Alt Text?"],"_ht_kb_post_views_count":["7"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["31618"],"wp_last_modified_info":["February 24, 2022 @ 2:29 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["5489"],"helpful":["3"],"unhelpful":["7"],"redirects":["1"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2021-09-08 20:52:29"],"rank_math_title":["How to Add Title Attribute to Header Background Image as a Substitute for Alt Text?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["881"],"rank_math_seo_score":["16"],"pfd_related_docs":[""],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"be8aa0ff559267d78db7034df4045f31\";s:6:\"images\";a:1:{i:0;i:40925;}}"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["atributo-title-en-la-imagen-de-fondo-de-la-cabecera"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:5:{i:0;s:14:\"core\/paragraph\";i:1;s:9:\"core\/code\";i:2;s:10:\"core\/image\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777024888\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Premanshu","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/premanshup\/"},"uagb_comment_info":0,"uagb_excerpt":"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&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/31618"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=31618"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/31618\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=31618"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=31618"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=31618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}