Categories

CSS. Propiedad de fondo

Chris Diaz noviembre 7, 2011
Rating: 2.5/5. From 2 votes.
Please wait...

Este artículo le ayudará a conocer las propiedades de fondo en CSS. Por lo general son utilizadas para definir el aspecto del elemento del fondo.

Hay varias propiedades CSS utilizadas para efectos de fondo:

  • background-color (color de fondo)
  • background-image (imagen de fondo)
  • background-repeat (repetición de fondo)
  • background-attachment (adjunto de fondo)
  • background-position (posición de fondo)

Como cualquier otra propiedad de estilo, fondo puede ser asignado a una etiqueta, clase o ID.

Background-color (color de fondo)

La propiedad background-color especifica el color de fondo de un elemento.

	div.block{
		background-color:#64a8d8;
		}

Normalmente color es especificado por:

  • a HEX value – like “#ff0000”
  • an RGB value – like “rgb(255,0,0)”
  • a color name – like “red”

Background-image (imagen de fondo)

La propiedad background-image define una imagen para utilizarla como fondo para el elemento.

	div.block{
		background-image:url(image-1.jpg);
		}

Background-repeat (repetición de fondo)

Por defecto, la imagen de fondo se repite para coincidir con el elemento. En otras palabras, si la anchura y la altura de su imagen es 100px y el elemento es 200px de ancho y de altura – la imagen de fondo se repetirá 4 veces.

Para evitar esto, utilice la propiedad background-repeat

	div.block-2{
		background-image:url(image-1.jpg);
		background-repeat: repeat-x;
		}

Puede utilizar los siguientes valores de propiedad:

  • repeat-x – para repetir imagen horizontalmente
  • repeat-y – para repetir imagen verticalmente
  • no-repeat – para desactivar repetición de imagen

Background-attachment (adjunto de fondo)

La propiedad background-attachment determina si una imagen de fondo es fijada o se desplaza con toda la página.

  • scroll – el fondo se desplaza con la página
  • fixed – el fondo está fijado y no se desplaza

Background-position (posición de fondo)

La propiedad background-position define la posición de la imagen de fondo inicial de acuerdo con el elemento. Por defecto, la imagen de fondo se coloca en la esquina superior izquierda.

	div.block-3{
		background-image:url(image-1.jpg);
		background-repeat: no-repeat;
		background-position: 40px 40px;
		}

El primero valor de la propiedad background-position se queda offset, el segundo – vertical.

También puede definir los valores en porcentaje (background-position: 100% 0%) o utilizando valores de texto (background-position: top right (arriba a la derecha);). Por ejemplo, puede definir la esquina inferior derecha de la siguiente manera (the element dimensions are 100px/100px /las dimensiones de los elementos son 100px/100px):

	background-position: right bottom;
o
	background-position: 100% 100%;
o
	background-position: 100px 100px;

Propiedad reducida

Como se sabe si hay muchos símbolos en el fichero CSS su tamaño se aumenta. Los ficheros CSS grandes pueden reducir la velocidad de carga de página web. Así es mejor utilizar poco código.

Le recomendamos que utilice el siguiente formato de la propiedad de fondo:

si utiliza el color de fondo:

	div.block-3{
		background:#64a8d8;
		}

si utiliza la imagen de fondo:

	div.block-3{
		background:url(image-1.jpg) top left no-repeat scroll; 
		}
donde :
Esta entrada fue publicada el Trabajar con CSS y etiquetada background, color, css, image. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket