{"id":1378,"date":"2024-08-01T19:34:42","date_gmt":"2024-08-01T17:34:42","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1378"},"modified":"2024-08-01T19:34:43","modified_gmt":"2024-08-01T17:34:43","slug":"03-multiples-backgrounds-con-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/03-multiples-backgrounds-con-css\/","title":{"rendered":"03. M\u00faltiples backgrounds con CSS"},"content":{"rendered":"\n

CSS<\/strong> permite agregar m\u00faltiples im\u00e1genes de fondo para un elemento, a trav\u00e9s de la propiedad background-image<\/em><\/strong>. Las diferentes im\u00e1genes de fondo est\u00e1n separadas por comas y las im\u00e1genes se apilan una encima de la otra, donde la primera imagen est\u00e1 m\u00e1s cerca del usuario. El siguiente ejemplo tiene dos im\u00e1genes de fondo, la primera imagen es una flor (alineada con la parte inferior derecha) y la segunda imagen es un fondo de papel (alineada con la esquina superior izquierda).<\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

#example1 {\n  background-image: url(img_flwr.gif), url(paper.gif);\n  background-position: right bottom, left top;\n  background-repeat: no-repeat, repeat;\n}<\/pre>\n\n\n\n
Se pueden especificar varias im\u00e1genes de fondo utilizando las propiedades de fondo individuales (como se indica arriba) o la propiedad abreviada de fondo. El siguiente ejemplo usa la propiedad abreviada de fondo (mismo resultado que el ejemplo anterior).<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
#example1 {\n  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;\n}<\/pre>\n\n\n\n
Tama\u00f1o de fondo CSS<\/h2>\n\n\n\n
La propiedad CSS background-size<\/em><\/strong> te permite especificar el tama\u00f1o de las im\u00e1genes de fondo. El tama\u00f1o se puede especificar en longitudes, porcentajes o usando una de las dos palabras clave: contain<\/em> <\/strong>o cover<\/em><\/strong>. El siguiente ejemplo cambia el tama\u00f1o de una imagen de fondo a mucho m\u00e1s peque\u00f1a que la imagen original (usando p\u00edxeles).<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
#div1 {\n  background: url(img_flower.jpg);\n  background-size: 100px 80px;\n  background-repeat: no-repeat;\n}<\/pre>\n\n\n\n
Los otros dos valores posibles para background-size<\/em><\/strong> son contain<\/em> <\/strong>y cover<\/em><\/strong>.<\/p>\n\n\n\n
La palabra clave contain<\/em> <\/strong>escala la imagen de fondo para que sea lo m\u00e1s grande posible (pero tanto el ancho como la altura deben caber dentro del \u00e1rea de contenido). Como tal, dependiendo de las proporciones de la imagen de fondo y el \u00e1rea de posicionamiento del fondo, puede haber algunas \u00e1reas del fondo que no est\u00e9n cubiertas por la imagen de fondo.<\/p>\n\n\n\n
La palabra clave cover<\/em> <\/strong>escala la imagen de fondo para que el \u00e1rea de contenido quede completamente cubierta por la imagen de fondo (tanto su ancho como su altura son iguales o superan el \u00e1rea de contenido). Como tal, algunas partes de la imagen de fondo pueden no ser visibles en el \u00e1rea de posicionamiento del fondo.<\/p>\n\n\n\n
El siguiente ejemplo ilustra el uso de contain<\/em> <\/strong>y cover.<\/em><\/strong><\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
#div1 {\n  background: url(img_flower.jpg);\n  background-size: contain;\n  background-repeat: no-repeat;\n}\n\n#div2 {\n  background: url(img_flower.jpg);\n  background-size: cover;\n  background-repeat: no-repeat;\n}<\/pre>\n\n\n\n
La propiedad background-origin<\/h2>\n\n\n\n
La propiedad CSS background-origin<\/em><\/strong> especifica d\u00f3nde se coloca la imagen de fondo.<\/p>\n\n\n\n
La propiedad toma tres valores diferentes:<\/p>\n\n\n\n
    \n
  • border-box<\/em><\/strong>: la imagen de fondo comienza en la esquina superior izquierda del borde<\/li>\n\n\n\n
  • padding-box<\/em><\/strong>: (predeterminado) la imagen de fondo comienza desde la esquina superior izquierda del borde del relleno<\/li>\n\n\n\n
  • content-box<\/em><\/strong>: la imagen de fondo comienza en la esquina superior izquierda del contenido<\/li>\n<\/ul>\n\n\n\n
    El siguiente ejemplo ilustra la propiedad background-origin<\/em><\/strong>.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    #example1 {\n  border: 10px solid black;\n  padding: 35px;\n  background: url(img_flwr.gif);\n  background-repeat: no-repeat;\n  background-origin: content-box;\n}<\/pre>\n\n\n\n
    La propiedad background-clip<\/h2>\n\n\n\n
    La propiedad CSS background-clip<\/em><\/strong> especifica el \u00e1rea de pintura del fondo.<\/p>\n\n\n\n
    La propiedad toma tres valores diferentes:<\/p>\n\n\n\n
      \n
    • border-box<\/em><\/strong>: (predeterminado) el fondo se pinta en el borde exterior del borde<\/li>\n\n\n\n
    • padding-box<\/em><\/strong>: el fondo est\u00e1 pintado en el borde exterior del relleno<\/li>\n\n\n\n
    • content-box<\/em><\/strong>: el fondo se pinta dentro del cuadro de contenido<\/li>\n<\/ul>\n\n\n\n
      El siguiente ejemplo ilustra la propiedad background-clip<\/em><\/strong>.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      #example1 {\n  border: 10px dotted black;\n  padding: 35px;\n  background: yellow;\n  background-clip: content-box;\n}<\/pre>\n\n\n\n
      Resumen<\/h2>\n\n\n\n
      Propiedad<\/th>Descripci\u00f3n<\/th><\/tr>
      background<\/em><\/strong><\/td>Una propiedad abreviada para establecer todas las propiedades de fondo en una declaraci\u00f3n<\/td><\/tr>
      background-clip<\/em><\/strong><\/td>Especifica el \u00e1rea de pintura del fondo.<\/td><\/tr>
      background-image<\/em><\/strong><\/td>Especifica una o m\u00e1s im\u00e1genes de fondo para un elemento<\/td><\/tr>
      background-origin<\/em><\/strong><\/td>Especifica d\u00f3nde se coloca(n) la(s) imagen(es) de fondo<\/td><\/tr>
      background-size<\/em><\/strong><\/td>Especifica el tama\u00f1o de la(s) imagen(es) de fondo<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
      CSS permite agregar m\u00faltiples im\u00e1genes de fondo para un elemento, a trav\u00e9s de la propiedad background-image. Las diferentes im\u00e1genes de fondo est\u00e1n…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1378","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"CSS permite agregar m\u00faltiples im\u00e1genes de fondo para un elemento, a trav\u00e9s de la propiedad background-image. Las diferentes im\u00e1genes de fondo est\u00e1n...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1378"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1378\/revisions"}],"predecessor-version":[{"id":1380,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1378\/revisions\/1380"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}