3 Fondos en CSS

GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
CSS múltiples Fondos

En este capítulo aprenderá cómo agregar múltiples imágenes de fondo de un elemento.
También podrá aprender acerca de las siguientes propiedades:
 background-size
 background-origin
 background-clip
CSS le permite añadir múltiples imágenes de fondo de un elemento, a través de la

propiedad background-image.
Las diferentes imágenes de fondo están separadas por comas, y las imágenes son apiladas una
encima de la otra, donde la primera imagen es la más cercana al espectador.
El siguiente ejemplo tiene dos imágenes de fondo, la primera imagen es una flor (alineado a la
parte inferior y derecha) y la segunda imagen es un fondo de papel (alineado a la esquina superior
izquierda):
#ejemplo1 {
background-image: url(imagenes/arbol.png), url(imagenes/fondo.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Ver: Código 239.html
Se pueden especificar múltiples imágenes de fondo: con las propiedades individuales del fondo
(como el anterior) o la propiedad background abreviada.
El ejemplo siguiente utiliza la propiedad background abreviada (el mismo resultado que en el
ejemplo anterior):
#ejemplo1 {
background: url(imagenes/arbol.png) right bottom no-repeat,
url(imagenes/fondo.jpg) left top repeat;
}

GERENCIA VIRTUAL
Tamaño del fondo CSS

La propiedad CSS background-size le permite especificar el tamaño de las imágenes de fondo.
El tamaño se puede especificar en longitudes, porcentajes, o mediante el uso de una de las dos
palabras clave: contain o cover.
El siguiente ejemplo cambia el tamaño de una imagen de fondo a mucho más pequeñas que la
imagen original (utilizando píxeles):
#div1 {
background: url(imagenes/arbol.png);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Los otros dos posibles valores de background-size son contain y cover.
La palabra clave contain establece la escala de la imagen de fondo, a ser tan grande como sea
posible (pero tanto su anchura y su altura debe caber dentro del área de contenido). Como tal,
dependiendo de las proporciones de la imagen de fondo y la zona de posicionamiento de fondo,
puede haber algunas áreas del fondo que no están cubiertas por la imagen de fondo.
La palabra clave cover escala la imagen de fondo de manera que el área de contenido está
completamente cubierta la imagen de fondo por (tanto su anchura y altura son iguales o exceden
el área de contenido). Como tal, algunas partes de la imagen de fondo pueden no ser visible en la
zona de posicionamiento de fondo.
El siguiente ejemplo ilustra el uso de contain y cover:
#div1 {
background-size: contain;
}
#div2 {
background-size: cover;
}

GERENCIA VIRTUAL
Definir tamaños de varias imágenes de fondo

La propiedad background-size también acepta varios valores para el tamaño de fondo
(usando una lista separada por comas), cuando se trabaja con múltiples orígenes.
El siguiente ejemplo se ha especificado tres imágenes de fondo, con diferente valor de fondo de
tamaño para cada imagen:
#ejemplo1 {
background: url(imagenes/arbol.png) left top no-repeat,
url(imagenes/arbol.png) right bottom no-repeat, url(imagenes/fondo.png) left
top repeat;
background-size: 50px, 130px, auto;
}
Imagen de fondo Full Page

Ahora queremos tener una imagen de fondo en un sitio web que cubre toda la ventana del
navegador en todo momento.
Los requisitos son los siguientes:
 Llenar toda la página con la imagen (sin espacios en blanco)

 Escalar la imagen según sea necesario
 Centrar imagen en la página
 No causan barras de desplazamiento
El siguiente ejemplo muestra cómo hacerlo; Utilice el elemento <html> (el elemento <html> es
siempre al menos la altura de la ventana del navegador). A continuación, establezca un fondo fijo y
centrado en ella. Luego, ajuste su tamaño con la propiedad background-size:
html {
background: url(imagenes/orquidea.jpg) no-repeat center fixed;
}

GERENCIA VIRTUAL
Imagen Héroe
También es posible usar diferentes propiedades de fondo en un <div> para crear una imagen de
héroe (una imagen grande con el texto), y colocarlo donde desee.
la propiedad background-size:
.hero-image {
background: url(imagenes/orquidea.jpg) no-repeat center;
height: 500px;
position: relative;
}
Propiedad Origen de Fondo CSS

La propiedad CSS background-origin especifica donde se coloca la imagen de fondo.
La propiedad tiene tres valores diferentes:
 border-box la imagen de fondo se inicia desde la esquina superior izquierda del borde.
 padding-box (predeterminado) la imagen de fondo se inicia desde la esquina superior
izquierda del límite del relleno
 content-box la imagen de fondo se inicia desde la esquina superior izquierda del
contenido
El siguiente ejemplo ilustra la propiedad background-origin:
#ejemplo1 {
border: 10px solid black;
padding: 35px;
background: url(imagenes/orquidea.jpg);
background-origin: content-box;
}

GERENCIA VIRTUAL
Propiedad Clip de Fondo CSS

La propiedad background-clip de CSS, especifica el área de la imagen del fondo.
La propiedad tiene tres valores diferentes:

 border-box (por defecto) el fondo está ilustrado hasta la parte exterior del borde.
 padding-box el fondo está ilustrado está ilustrado hasta la parte exterior del relleno o
padding.
 Content-box el fondo está ilustrado está ilustrado hasta el fondo del texto o contenido.
El siguiente ejemplo ilustra la propiedad background-clip:
#ejemplo1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

3 Fondos en CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

3 Fondos en CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

CSS múltiples Fondos

CSS le permite añadir múltiples imágenes de fondo de un elemento, a través de la

Ver: Código 239.html

Ver: Código 240.html

Tamaño del fondo CSS

Ver: Código 241.html

Los otros dos posibles valores de background-size son contain y cover.

El siguiente ejemplo ilustra el uso de contain y cover:

Ver: Código 242.html

Definir tamaños de varias imágenes de fondo

Ver: Código 243.html

Imagen de fondo Full Page

Los requisitos son los siguientes:

 Llenar toda la página con la imagen (sin espacios en blanco)

Ver: Código 244.html

Ver: Código 245.html

Propiedad Origen de Fondo CSS

La propiedad tiene tres valores diferentes:

El siguiente ejemplo ilustra la propiedad background-origin:

Ver: Código 246.html

Propiedad Clip de Fondo CSS

La propiedad tiene tres valores diferentes:

El siguiente ejemplo ilustra la propiedad background-clip:

Ver: Código 247.html

Anda mungkin juga menyukai