{"id":3745,"date":"2021-01-26T13:00:00","date_gmt":"2021-01-26T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=3745"},"modified":"2022-09-27T14:55:41","modified_gmt":"2022-09-27T12:55:41","slug":"como-poner-una-imagen-de-fondo-en-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/","title":{"rendered":"C\u00f3mo poner una imagen de fondo en HTML"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En la entrada de hoy vamos a ver <strong>c\u00f3mo poner una imagen de fondo en HTML<\/strong>, o mejor dicho, <strong>c\u00f3mo poner una imagen de fondo en CSS<\/strong>. Es una entrada especialmente pensada para usuarios que est\u00e1n inici\u00e1ndose en el mundo del dise\u00f1o web. Si perteneces a este grupo, ponte c\u00f3modo, ya que \u00a1comenzamos!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Antes de pasar a detallar <strong>c\u00f3mo poner una imagen de fondo con CSS en HTML<\/strong> te aviso que necesitar\u00e1s tener <a href=\"https:\/\/carontestudio.com\/blog\/listado-de-etiquetas-html\/\">nociones b\u00e1sicas de HTML y de sus etiquetas y atributos<\/a>. Si ya conoces algo sobre c\u00f3mo programar en HTML y sobretodo en CSS, puedes saltarte directamente el siguiente punto. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo usar CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de comenzar, debes saber que hay tres formas, a priori, de darle estilos a tu p\u00e1gina web. Las tres formas ser\u00edan las siguientes: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CSS en Hoja de estilos externa.<\/li><li>CSS dentro del &lt;head&gt; del documento HTML, usando las etiquetas HTML &lt;style&gt;.<\/li><li>CSS en l\u00ednea.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Durante la entrada, todos los ejemplos que usar\u00e9 est\u00e1n realizados usando una hoja de estilos externa del documento HTML. De hecho, <strong>hacerlo as\u00ed es lo m\u00e1s recomendable <\/strong>en casi todos los proyectos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para <strong>dar estilos CSS a tu p\u00e1gina web<\/strong>, primero debes apuntar a un selector, que puede ser por ejemplo una etiqueta HTML. Tambi\u00e9n puedes usar un atributo de \u00abclase\u00bb o un \u00abid\u00bb. A continuaci\u00f3n, la <strong>declaraci\u00f3n de estilos<\/strong> (<strong>propiedad <\/strong>+ <strong>valor<\/strong>), deber\u00e1s introducirla dentro de unas llaves como las siguientes: <strong>{ }<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por lo tanto, en tu c\u00f3digo deber\u00e1s ver algo as\u00ed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n   \/* Aqui se introduce la declaraci\u00f3n de estilos *\/\n}   <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Con las llaves, definimos que reglas se aplicar\u00e1n al selector seleccionado. En este caso, hemos elegido una etiqueta HTML (body) como selector. <\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Adem\u00e1s de a\u00f1adir una imagen de fondo a tu sitio web, tambi\u00e9n podr\u00e1s <a href=\"https:\/\/carontestudio.com\/blog\/como-poner-un-video-de-fondo-en-html\/\">a\u00f1adir un video de fondo HTML<\/a> de forma muy f\u00e1cil<\/p><\/blockquote>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Colocar una imagen de fondo en una p\u00e1gina web<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para <strong>a\u00f1adir una imagen de fondo en una p\u00e1gina web<\/strong>, hay usar la propiedad <strong>background-image<\/strong> seguida de un valor, en este caso la URL de la imagen que vamos a usar de imagen de fondo. La declaraci\u00f3n quedar\u00eda algo similar a esto: <strong>background-image: url(\u00ab\/nombre-de-la-imagen.jpg\/\u00bb)<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visualmente el resultado ser\u00eda este:<\/p>\n\n\n\n<iframe height=\"465\" style=\"width: 100%;\" scrolling=\"yes\" title=\"xxENZYo\" src=\"https:\/\/codepen.io\/carontestudio\/embed\/xxENZYo?height=265&amp;theme-id=light&amp;default-tab=html,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/carontestudio\/pen\/xxENZYo'>xxENZYo<\/a> by Alberto\n  (<a href='https:\/\/codepen.io\/carontestudio'>@carontestudio<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Diferentes tipos de imagen de fondo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En el ejemplo anterior hemos visto <strong>c\u00f3mo poner una imagen de fondo en HTML<\/strong> a trav\u00e9s de la propiedad: background-image. Junto a esta propiedad, existen adem\u00e1s otras que complementan como puedes programar una imagen de fondo en HTML. Las propiedades que puedes usar junto a background-imagen son las siguientes: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Background-repeat<\/li><li>Background-position<\/li><li>Background-attachment<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Background-repeat<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La propiedad \u201c<strong>background-repeat<\/strong>\u201d repite por defecto la imagen de fondo hasta cubrir por completo la superficie del elemento que lo contiene. Por ejemplo, si nuestra p\u00e1gina web mide 800px de alto y 800px de ancho, y el fondo de la imagen mide 100x100px, <strong>el fondo se repetir\u00e1 hasta cubrir los 800px<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los valores que esta propiedad admite son los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>repeat<\/strong>: La imagen de fondo siempre se repetir\u00e1 hasta llenar el contenedor.<\/li><li><strong>repeat-y<\/strong>: Se repite \u00fanicamente de manera vertical, es decir en el <strong>eje y<\/strong>.<\/li><li><strong>repeat-x<\/strong>: Se repite \u00fanicamente de manera horizontal, es decir se repetir\u00e1 en el <strong>eje-x<\/strong>.<\/li><li><strong>no-repeat<\/strong>: La imagen se muestra, pero no se repite.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Por defecto, esta propiedad tiene el valor \u00ab<strong>repeat\u00bb<\/strong>. Lo habitual, cada vez que usas la propiedad \u00abbackground-image\u00bb, es usar la propiedad \u00ab<strong>repeat\u00bb <\/strong>con el valor \u00ab<strong>no-repeat\u00bb<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el siguiente ejemplo ver\u00e1s una imagen de fondo que se repite solo en el eje vertical. <\/p>\n\n\n\n<iframe height=\"465\" style=\"width: 100%;\" scrolling=\"yes\" title=\"wvzLPrb\" src=\"https:\/\/codepen.io\/carontestudio\/embed\/wvzLPrb?height=265&amp;theme-id=light&amp;default-tab=css,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/carontestudio\/pen\/wvzLPrb'>wvzLPrb<\/a> by Alberto\n  (<a href='https:\/\/codepen.io\/carontestudio'>@carontestudio<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Background-position<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Si tenemos una imagen de fondo que hemos decidido no repetir a lo largo de todo el contenedor, es posible que esta imagen no cubra la totalidad de la superficie y por tanto, <strong>quede espacio libre<\/strong>. En ese caso, es posible determinar la posici\u00f3n de la imagen de fondo mediante la propiedad \u201c<strong>background-position<\/strong>\u201d. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n es posible determinar esta propiedad incluso cuando la imagen de fondo ocupe todo el ancho o el alto, pudiendo escoger <strong>su posici\u00f3n en el eje vertical u horizontal<\/strong>, dependiendo del caso. Veamos en el siguiente ejemplo <strong>como centrar una imagen de fondo en el centro<\/strong> del contenedor:<\/p>\n\n\n\n<iframe height=\"565\" style=\"width: 100%;\" scrolling=\"yes\" title=\"LYRKmKP\" src=\"https:\/\/codepen.io\/carontestudio\/embed\/LYRKmKP?height=265&amp;theme-id=light&amp;default-tab=css,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/carontestudio\/pen\/LYRKmKP'>LYRKmKP<\/a> by Alberto\n  (<a href='https:\/\/codepen.io\/carontestudio'>@carontestudio<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Background-size<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n podemos definir el tama\u00f1o que tendr\u00e1 la imagen de fondo, si esta no se repite y tampoco ocupa la totalidad del contenedor. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por defecto, el tama\u00f1o de la imagen de fondo se mostrar\u00e1 al m\u00e1ximo de su tama\u00f1o. Si por ejemplo, la imagen es m\u00e1s grande que el contenedor, solo veremos parte de la imagen. Para solucionarlo, podemos definir el tama\u00f1o de la imagen con la propiedad \u00ab<strong>background-size<\/strong>\u00ab, junto a un valor que puede ser indicado con diferentes medidas <strong>relativas o absolutas<\/strong> (rem, em, %, picas, cm, px, etc)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En el siguiente ejemplo vamos a ver como poner una imagen de fondo que ocupe la totalidad del contenedor: <\/p>\n\n\n\n<iframe height=\"565\" style=\"width: 100%;\" scrolling=\"yes\" title=\"NWRZzNX\" src=\"https:\/\/codepen.io\/carontestudio\/embed\/NWRZzNX?height=265&amp;theme-id=light&amp;default-tab=css,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/carontestudio\/pen\/NWRZzNX'>NWRZzNX<\/a> by Alberto\n  (<a href='https:\/\/codepen.io\/carontestudio'>@carontestudio<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Background-attachment<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Esta propiedad determina el comportamiento de la imagen de fondo <strong>durante el scroll de la p\u00e1gina<\/strong>. Esto significa que podemos escoger si el fondo permanecer\u00e1 <strong>est\u00e1tico<\/strong> o acompa\u00f1ara al scroll de la ventana del navegador del usuario. Para dejar la imagen est\u00e1tica, el valor a indicar debe ser: \u00ab<strong>fixed<\/strong>\u00ab. Por el contrario, si queremos que haga scroll, o bien no definimos esta propiedad, o la forzamos con el valor: \u00ab<strong>scroll<\/strong>\u00ab. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es muy habitual emplear la combinaci\u00f3n de fondos con distintos comportamientos o similares. <\/p>\n\n\n\n<iframe height=\"465\" style=\"width: 100%;\" scrolling=\"yes\" title=\"PoGrajJ\" src=\"https:\/\/codepen.io\/carontestudio\/embed\/PoGrajJ?height=265&amp;theme-id=light&amp;default-tab=html,result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href='https:\/\/codepen.io\/carontestudio\/pen\/PoGrajJ'>PoGrajJ<\/a> by Alberto\n  (<a href='https:\/\/codepen.io\/carontestudio'>@carontestudio<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.\n<\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Como has podido comprobar, <strong>poner una imagen de fondo en css<\/strong> es muy f\u00e1cil. Tan solo necesitas tener un poco de conocimientos previos de <strong>css <\/strong>y <strong>HTML<\/strong>. Si tienes dudas con alguna de las propiedades no dudes en dejarme un comentario y te reponder\u00e9 lo m\u00e1s r\u00e1pido posible. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/como-poner-un-video-de-fondo-en-html\/\"><img decoding=\"async\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/03\/como-anadir-video-html-de-fondo-en-una-pagina-web.jpg\" alt=\"Como poner un video de fondo HTML en tu web\" class=\"wp-image-5300\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/\"><img decoding=\"async\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg\" alt=\"Como a\u00f1adir un reproductor de audio HTML en tu web\" class=\"wp-image-5300\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En la entrada de hoy vamos a ver c\u00f3mo poner una imagen de fondo en HTML, o mejor dicho, c\u00f3mo poner una imagen de fondo en CSS. Es una entrada especialmente pensada para usuarios que est\u00e1n inici\u00e1ndose en el mundo del dise\u00f1o web. Si perteneces a este grupo, ponte c\u00f3modo, ya que \u00a1comenzamos!<\/p>\n","protected":false},"author":4,"featured_media":3778,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94,50],"tags":[92],"class_list":["post-3745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion-web","tag-html"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog<\/title>\n<meta name=\"description\" content=\"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog\" \/>\n<meta property=\"og:description\" content=\"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de marketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-26T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-27T12:55:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"V\u00edctor S\u00e1nchez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog\" \/>\n<meta name=\"twitter:description\" content=\"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"V\u00edctor S\u00e1nchez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/\"},\"author\":{\"name\":\"V\u00edctor S\u00e1nchez\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\"},\"headline\":\"C\u00f3mo poner una imagen de fondo en HTML\",\"datePublished\":\"2021-01-26T12:00:00+00:00\",\"dateModified\":\"2022-09-27T12:55:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/\"},\"wordCount\":1023,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/como-poner-imagen-de-fondo-en-html.jpg\",\"keywords\":[\"HTML\"],\"articleSection\":[\"Dise\u00f1o web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/\",\"name\":\"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/como-poner-imagen-de-fondo-en-html.jpg\",\"datePublished\":\"2021-01-26T12:00:00+00:00\",\"dateModified\":\"2022-09-27T12:55:41+00:00\",\"description\":\"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/como-poner-imagen-de-fondo-en-html.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/como-poner-imagen-de-fondo-en-html.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Como poner imagen de fondo en html\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-poner-una-imagen-de-fondo-en-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo poner una imagen de fondo en HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\",\"name\":\"V\u00edctor S\u00e1nchez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"caption\":\"V\u00edctor S\u00e1nchez\"},\"description\":\"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.\",\"sameAs\":[\"https:\\\/\\\/www.carontestudio.com\\\/\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/victor\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog","description":"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog","og_description":"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!","og_url":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/","og_site_name":"Blog de marketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2021-01-26T12:00:00+00:00","article_modified_time":"2022-09-27T12:55:41+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg","type":"image\/jpeg"}],"author":"V\u00edctor S\u00e1nchez","twitter_card":"summary_large_image","twitter_title":"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog","twitter_description":"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!","twitter_image":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg","twitter_misc":{"Escrito por":"V\u00edctor S\u00e1nchez","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/"},"author":{"name":"V\u00edctor S\u00e1nchez","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9"},"headline":"C\u00f3mo poner una imagen de fondo en HTML","datePublished":"2021-01-26T12:00:00+00:00","dateModified":"2022-09-27T12:55:41+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/"},"wordCount":1023,"commentCount":20,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg","keywords":["HTML"],"articleSection":["Dise\u00f1o web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/","url":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/","name":"C\u00f3mo poner una imagen de fondo en HTML - Caronte Blog","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg","datePublished":"2021-01-26T12:00:00+00:00","dateModified":"2022-09-27T12:55:41+00:00","description":"Si quieres poner una imagen de fondo en HTML o CSS, esta publicaci\u00f3n es para ti. En muy pocos pasos lo har\u00e1s. \u00a1Vente!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/01\/como-poner-imagen-de-fondo-en-html.jpg","width":1250,"height":737,"caption":"Como poner imagen de fondo en html"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/como-poner-una-imagen-de-fondo-en-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo poner una imagen de fondo en HTML"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9","name":"V\u00edctor S\u00e1nchez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","caption":"V\u00edctor S\u00e1nchez"},"description":"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.","sameAs":["https:\/\/www.carontestudio.com\/"],"url":"https:\/\/carontestudio.com\/blog\/author\/victor\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3745"}],"version-history":[{"count":33,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3745\/revisions"}],"predecessor-version":[{"id":11130,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/3745\/revisions\/11130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/3778"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}