{"id":27575,"date":"2024-12-20T10:38:47","date_gmt":"2024-12-20T10:38:47","guid":{"rendered":"https:\/\/doc.probance.com\/?post_type=tutoriels&#038;p=27575"},"modified":"2026-03-03T11:28:53","modified_gmt":"2026-03-03T11:28:53","slug":"anadir-una-imagen-de-fondo-en-un-bloque","status":"publish","type":"tutoriels","link":"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-un-bloque\/","title":{"rendered":"A\u00f1adir una imagen de fondo en un bloque"},"content":{"rendered":"\n<p><em>Para agregar una dimensi\u00f3n visual adicional a tus campa\u00f1as y aumentar su impacto, puedes mostrar im\u00e1genes de fondo en tus plantillas o en los bloques que las componen.<\/em><\/p>\n\n\n\n<p><em>Este tutorial explica c\u00f3mo agregar una imagen de fondo a un bloque en el editor Fastbuilder.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">1. Seleccionar una imagen<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selecciona tu bloque en el editor y luego abre la pesta\u00f1a <strong>Contenido<\/strong>.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Activa la opci\u00f3n<strong> Imagen de fondo<\/strong>.<\/li>\n<\/ol>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Haz clic en el icono de Imagen para abrir la galer\u00eda.<\/li>\n<\/ol>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Importa o selecciona tu imagen, luego haz clic en <strong>Usar esta imagen <\/strong>para confirmar.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-style-info is-style-note is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Nota:<\/strong> Para no ralentizar la carga del correo electr\u00f3nico, elige archivos de menos de 1 MB en formato JPEG o PNG comprimido.<\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">2. Dar formato al fondo<\/h2>\n\n\n\n<p>Una vez seleccionada tu imagen, puedes ajustar su visualizaci\u00f3n, siempre en la pesta\u00f1a Contenido, para dar formato a su fondo.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>El campo<strong> Posici\u00f3n <\/strong>te permite definir d\u00f3nde debe colocarse la imagen dentro del bloque. Puedes alinearla con la parte superior, inferior, izquierda o derecha del bloque, o centrarla.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>El campo<strong> Repetir <\/strong>te permite definir si la imagen debe repetirse y de qu\u00e9 manera. Por defecto, la imagen no se repite y solo se muestra una vez. Los modos de repetici\u00f3n disponibles son los siguientes.\n<ul class=\"wp-block-list\">\n<li>Horizontal: la imagen se repite a lo largo de todo el ancho del bloque.<\/li>\n\n\n\n<li>Vertical: la imagen se repite a lo largo de toda la altura del bloque.<\/li>\n\n\n\n<li>Horizontal y vertical: la imagen se repite tanto en ancho como en alto dentro del bloque.<\/li>\n\n\n\n<li>Con espacio: la imagen se muestra completa en ancho y alto para llenar todo el espacio disponible en el bloque, sin ser recortada ni redimensionada.<\/li>\n\n\n\n<li>Sin espacio: la imagen se muestra completa en ancho y alto para llenar todo el espacio disponible en el bloque y puede ser redimensionada.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>El campo <strong>Tama\u00f1o <\/strong>te permite definir c\u00f3mo debe ajustarse el tama\u00f1o de la imagen al espacio a llenar. Por defecto, tu imagen no se redimensiona y mantiene su tama\u00f1o original. Las opciones disponibles son las siguientes:\n<ul class=\"wp-block-list\">\n<li>Cubrir: La imagen se redimensiona (conservando las proporciones) para llenar todo el espacio disponible en el bloque.<\/li>\n\n\n\n<li>Contener: La imagen se redimensiona (conservando las proporciones) para llenar el ancho del bloque.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">3. Compatibilidad con los proveedores de correo electr\u00f3nico<\/h2>\n\n\n\n<p>Cuando dise\u00f1es una plantilla, es esencial tener en cuenta las posibles diferencias de visualizaci\u00f3n, no solo seg\u00fan los dispositivos, sino tambi\u00e9n seg\u00fan las aplicaciones y los navegadores.<\/p>\n\n\n\n<p>Por ejemplo, algunos proveedores de correo electr\u00f3nico, como Outlook en Windows, no son compatibles con las im\u00e1genes de fondo en HTML y CSS. Por lo tanto, estas im\u00e1genes no se mostrar\u00e1n en tus plantillas.<\/p>\n\n\n\n<p>Para garantizar una legibilidad \u00f3ptima para todos tus destinatarios, recuerda configurar un color de fondo para todos los bloques que contengan una imagen de fondo. Este color debe ofrecer un contraste suficiente con el texto y los otros elementos del bloque.<\/p>\n\n\n\n<p>Puedes ajustar el color de fondo de un bloque en la pesta\u00f1a <strong>Estilo<\/strong>.<\/p>\n<div id=\"wpmem_restricted_msg\"><p>Este contenido est\u00e1 restringido a los miembros del sitio. Si eres un usuario existente, por favor, accede. Los nuevos usuarios pueden registrarse a continuaci\u00f3n.<\/p><\/div><div id=\"wpmem_login\"><a id=\"login\"><\/a><form action=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-un-bloque\/\" method=\"POST\" id=\"wpmem_login_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_login_nonce\" name=\"_wpmem_login_nonce\" value=\"f834b2436e\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/tutoriels\/27575\" \/><fieldset><legend>Acceso de usuarios existentes<\/legend><label for=\"log\">Nombre de usuario o correo electr\u00f3nico<\/label><div class=\"div_text\"><input name=\"log\" type=\"text\" id=\"log\" value=\"\" class=\"username\" required  \/><\/div><label for=\"pwd\">Contrase\u00f1a<\/label><div class=\"div_text\"><input name=\"pwd\" type=\"password\" id=\"pwd\" class=\"password\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"login\" \/><input name=\"redirect_to\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-un-bloque\/\" \/><div class=\"button_div\"><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/>&nbsp;<label for=\"rememberme\">Recu\u00e9rdame<\/label>&nbsp;&nbsp;<input type=\"submit\" name=\"Submit\" value=\"Acceder\" class=\"buttons\" \/><\/div><\/fieldset><\/form><\/div><div id=\"wpmem_reg\"><a id=\"register\"><\/a><form name=\"form\" method=\"post\" action=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-un-bloque\/\" id=\"wpmem_register_form\" class=\"form\"><input type=\"hidden\" id=\"_wpmem_register_nonce\" name=\"_wpmem_register_nonce\" value=\"6cc3867c56\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/tutoriels\/27575\" \/><fieldset><legend>Registro de un nuevo usuario<\/legend><label for=\"username\" class=\"text\">Elige un nombre de usuario<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"username\" type=\"text\" id=\"username\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"first_name\" class=\"text\">Nombre<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"last_name\" class=\"text\">Apellidos<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"last_name\" type=\"text\" id=\"last_name\" value=\"\" class=\"textbox\" required  \/><\/div><label for=\"user_email\" class=\"text\">Correo electr\u00f3nico<span class=\"req\">*<\/span><\/label><div class=\"div_text\"><input name=\"user_email\" type=\"email\" id=\"user_email\" value=\"\" class=\"textbox\" required  \/><\/div><input name=\"a\" type=\"hidden\" value=\"register\" \/><input name=\"wpmem_reg_page\" type=\"hidden\" value=\"https:\/\/doc.probance.com\/es\/base-de-conocimiento\/anadir-una-imagen-de-fondo-en-un-bloque\/\" \/><div class=\"button_div\"><input name=\"submit\" type=\"submit\" value=\"Registro\" class=\"buttons\" \/><\/div><div class=\"req-text\"><span class=\"req\">*<\/span>Campo necesario<\/div><\/fieldset><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Para agregar una dimensi\u00f3n visual adicional a tus campa\u00f1as y aumentar su impacto, puedes mostrar im\u00e1genes de fondo en tus plantillas o en los bloques que las componen. Este tutorial explica c\u00f3mo agregar una imagen de fondo a un bloque en el editor Fastbuilder. 1. Seleccionar una imagen Nota: Para no ralentizar la carga del [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","sujets":[729],"class_list":["post-27575","tutoriels","type-tutoriels","status-publish","hentry","sujets-plantillas"],"_links":{"self":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/tutoriels\/27575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/tutoriels"}],"about":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/types\/tutoriels"}],"author":[{"embeddable":true,"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/media?parent=27575"}],"wp:term":[{"taxonomy":"sujets","embeddable":true,"href":"https:\/\/doc.probance.com\/es\/wp-json\/wp\/v2\/sujets?post=27575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}