Propiedad background
Labels:
Propiedad
at
domingo, agosto 03, 2014
►background
La propiedad background permite definir simultáneamente todas las propiedades relacionadas con el fondo de cualquier elemento: background-color, background-image, background-position, background-repeat y background-attachment
☛ La propiedad background-color establece el color de fondo de cualquier elemento con la propiedad .
selector { background-color: green; }
☛ La propiedad background-image establece cualquier imagen como fondo de un elemento. La sintaxis es la siguiente background-image: url("nombre_de_la_imagen"),
selector { background-image: url("....jpg");
}
Se pueden combinar
selector { background-color: green;background-image: url("....jpg"); }
- Por omisión, los navegadores repiten la imagen de fondo tanto en vertical como en horizontal.
☛ La propiedad background-repeat permite controlar esa repetición.
Los posibles valores de background-repeat son:
→ no-repeat: la imagen no se repite
selector { background-image: url(".....jpg");background-repeat: no-repeat; }→ repeat-x: la imagen se repite únicamente en horizontal
body { background-image: url("....jpg");→ repeat-y: la imagen se repite únicamente en vertical
background-repeat: repeat-x; }
selector { background-image: url("....jpg");background-repeat: repeat-y; }
→ repeat: la imagen se repite en horizontal y vertical
selector { background-image: url("....jpg");background-repeat: repeat; }
☛ La propiedad background-position permite establecer la posición de la imagen de fondo. A esta propiedad hay que darle dos valores: la posición horizontal y la posición vertical.
Los posibles valores de background-position son:
→ valores numéricos (porcentajes o distancias)
→ left, center y right: establecen la posición horizontal (izquierda, centro y derecha, respectivamente)
→ top, center, bottom: establece la posición vertical (arriba, en medio, abajo, respectivamente)
☛ La propiedad background-attachment establece el comportamiento de la imagen de fondo cuando se desplaza el elemento (al utilizar las barras de desplazamiento del navegador).
Los posibles valores de background-attachment son:
→ scroll: la imagen acompaña al elemento cuando este se desplaza
→ fixed: la imagen permanece fija
♦ El valor scroll hace que la imagen acompañe al elemento y se puede aplicar en cualquier elemento.
selector { background-attachment: scroll; background-image: url("...jpg");background-position: right top;
background-repeat: no-repeat;
}
♦ El valor fixed hace que la imagen permanezca fija en la ventana y no se desplace cuando se desplaza el elemento. Pero además la posición de la imagen de fondo se interpreta siempre con respecto a la ventana y únicamente es visible cuando el elemento está en esa posición.
Resumen
| Propiedad | Descripción | Valores |
| background | propiedad compuesta | background-attachment | background-color | background-image | background-position | background-repeat |
| background-attachment | atadura de la imagen | fixed | scroll |
| background-color | color de fondo | transparent | color |
| background-image | imagen de fondo | none | uri |
| background-position | posición de la imagen de fondo | [ left | center | right | distancia | porcentaje] [ top | center | bottom | distancia | porcentaje] [ left |center | right ] - [ top | center | bottom ] |
| background-repeat | repetición de la imagen de fondo | no-repeat | repeat | repeat-x | repeat-y |
Imagen de fondo y márgenes exteriores e interiores
Salvo para el elemento <html>, las imágenes de fondo se colocan del borde para adentro del elemento, es decir, que:
→ si el elemento tiene margen interior, el margen interior muestra la imagen o el color de fondo,
→ si el elemento tiene margen exterior, el margen exterior no muestra la imagen o el color de fondo (se dice que el margen exterior es trasparente).
En el caso de repetición de la imagen de fondo, la posición inicial de la imagen es la esquina superior izquierda y se repite a partir de esa posición.
selector { background-color: blue;
}
p { background: url("....png");
background-color: green;
}
p.con-margen-exterior { margin: 10px;
}
p.con-margen-interior { padding: 10px;
}
Si te gusta la entrada compártela.
¡Gracias!
Copyright © 2013
Cambio-Cambie Blogger
Diseñado por CCB Desarrollado por Blogger
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.
►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>
No olvides suscribirte para recibir las actualizaciones