Tecnologías y códigos Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Las propiedades del background



La propiedad background es una de las “propiedades shorthand“ que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

En concreto, background permite establecer simultáneamente las cinco propiedades relacionadas con el color e imagen de fondo de cada elemento.



Las propiedades del background.

Gracias a la propiedad background se puede establecer de forma directa el color de fondo (background-color), la imagen de fondo (background-image), su posición (background-position), si la imagen es fija o no (background-attachment) y/o si la imagen se repite o no (background-repeat). Puedes consultar la documentación de cada propiedad individual para acceder a sus ejemplos de uso.

En ocasiones, la propiedad background se utiliza simplemente para establecer el color de fondo de un elemento, ya que es más corto de escribir que la propiedad background-color.

De esta forma, las dos reglas CSS siguientes producen el mismo efecto:

div {

background-color: #CCC;

}

div {

background: #CCC;

}

El uso habitual de la propiedad background es el de mostrar una imagen de fondo en un elemento y simultáneamente establecer las propiedades de esa imagen (si se repite o no, su posición y si es fija o no). Las dos reglas CSS siguientes son equivalentes, pero la segunda es mucho más compacta:

div {

background-image: url(“images/imagen_pequena.png”);

background-repeat: no-repeat;

background-position: 2em 1.5cm;

background-attachment: fixed;

}

div {

background: url(“images/imagen_pequena.png”) no-repeat 2em 1.5cm fixed;

}

Como es habitual en las “propiedades shorthand”, se puede establecer uno, varios o todos los valores permitidos:

div {

background: url(“images/imagen_pequena.png”) no-repeat;

}

div {

background: url(“images/imagen_pequena.png”) no-repeat fixed;

}

div {

background: url(“images/imagen_pequena.png”) 10px 20px no-repeat;

}

div {

background: url(“images/imagen_pequena.png”) top repeat-y scroll;

}

Como el orden de cada propiedad individual dentro de background es indiferente, todas las declaraciones CSS siguientes son correctas y equivalentes:

1- background: url(“images/imagen_pequena.png”) no-repeat 2em 1.5cm fixed;

background: fixed url(“images/imagen_pequena.png”) no-repeat 2em 1.5cm;

2- background: no-repeat fixed url(“images/imagen_pequena.png”) 2em 1.5cm;

background: 2em 1.5cm url(“images/imagen_pequena.png”) no-repeat fixed;

3- background: no-repeat 2em 1.5cm fixed url(“images/imagen_pequena.png”);

background: 2em 1.5cm url(“images/imagen_pequena.png”) fixed no-repeat;

4- background: no-repeat url(“images/imagen_pequena.png”) 2em 1.5cm fixed;

background: fixed 2em 1.5cm url(“images/imagen_pequena.png”) no-repeat;

Cuando se establece un color de fondo y una imagen de fondo a un mismo elemento, la imagen tiene prioridad. Por ello, el color sólo se ve en las zonas transparentes de la imagen y en las zonas del elemento que no están cubiertas por la imagen de fondo.

No obstante, es una buena práctica establecer un color de fondo siempre que se establezca una imagen de fondo. El motivo es que cuando los navegadores se descargan las imágenes de fondo, se pueden producir errores que impidan obtener la imagen.

Así, si se ha establecido un color de fondo similar a la imagen de fondo que no se puede mostrar, el usuario apenas notará la diferencia y el diseño de la página no sufrirá demasiado el error producido. Cuando la imagen de fondo es muy compleja y no se puede escoger un color similar, se recomienda establecer un color de fondo adecuado para leer el texto que pueda contener el elemento.



Fuente: este post proviene de Tecnologías y códigos, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Pasado y futuro del Isetta

El BMW Isetta, el utilitario más famoso y pequeño de los años 50, podría estar de vuelta en un futuro no muy lejano. Al menos eso es lo que señala la página de motor motorpasion. Pasado y futuro del ...

Recomendamos

Relacionado

avanzado BLOG redes sociales ...

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas

Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google. Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ...

internet avanzado blog ...

Tutorial Blogger: blondas enmarcando las entradas del blog

Cómo poner blondas enmarcando el blog. Es una duda que me ha llegado varias veces por email, pero si tuviera que contestar una a una... ¡no me daría la vida! La verdad es que hay varias formas de hacerlo y puede que esta no sea la más sencilla, pero es la que a mí me funciona y por eso es la que he elegido compartir contigo. Necesitas acceder a tu cuenta de google photos (donde se alojan las imág ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

general

Curso Blogger: aprende a utilizar las hojas de estilo

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

CSS: Nivel B1

Personalizar un formulario de suscripción

Tener una lista de suscripción es muy importante para captar seguidores más fieles que los que captaríamos en cualquier red social como Twitter o Facebook, sin embargo muchos piensan que una vez hecha la lista vale con pegar el código que nos da nuestro proveedor de e-mail marketing y ya nos lloverán los suscriptores, por lo que nos encontramos páginas con campos de formulario que se presentan con ...

Tutorial

Personalizar un formulario en Blogger

Tener una lista de suscripción es muy importante en el camino de convertirse en un Blogger de éxito, sin embargo muchos piensan que una vez hecha la lista vale todo el resto, por lo que nos encontramos páginas con campos de formulario que se presentan con el aspecto predeterminado que les da el navegador, evitar esta catástrofe en WordPress es sencillo, ya que contamos con plugins que nos facilita ...

general

Creación y personalización de menús en Blogger paso a paso.

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...

Diseño para Blogs Uncategorized Apariencia ...

La barra de menu y las nuevas tendencias

La barra de menu y las nuevas tendencias La barra de menu es una de las partes más importantes de el diseño web, sirva para muchas cosas y lo más importante nos ayuda a encontrar todo de forma rápida y ágil A estas alturas sé que hay muchos blogs que no tienen barra de menu y cometen un error, porque si no cuentan con un buen widget buscador… es muy complicado que los lectores pasen horas na ...