Fondo CSS

CSS permite aplicar colores puros como fondo, también permite usar imágenes de fondo para crear efectos bastante complejos.

La capacidad de CSS en este aspecto está mucho por encima de HTML.

Color de fondo

Se puede usar Atributo background-colorEstablecer un color de fondo para el elemento. Esta propiedad acepta cualquier valor de color válido.

Esta regla establece el fondo del elemento en gris:

p {background-color: gray;}

Si desea que el color de fondo se extienda poco hacia afuera desde el texto del elemento, simplemente agregue un poco de margen interno:

p {background-color: gray; padding: 20px;}

Try it yourself

Se puede establecer un color de fondo para todos los elementos, lo que incluye body hasta elementos en línea como em y a.

background-color no puede ser heredado, su valor predeterminado es transparente. Transparente significa 'transparente'. Es decir, si un elemento no especifica un color de fondo, el fondo será transparente, permitiendo que el fondo de sus elementos superiores sea visible.

imagen de fondo

Para insertar una imagen en el fondo, es necesario utilizar La propiedad background-image.El valor predeterminado de la propiedad background-image es none, lo que significa que no se coloca ninguna imagen en el fondo.

Si es necesario establecer una imagen de fondo, debe establecer un valor de URL para esta propiedad:

body {background-image: url(/i/eg_bg_04.gif);}

La mayoría de los fondos se aplican al elemento body, aunque no se limita a esto.

El siguiente ejemplo aplica un fondo a un párrafo sin aplicar fondo a otras partes del documento:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Incluso se puede establecer una imagen de fondo para elementos en línea. El siguiente ejemplo establece una imagen de fondo para un enlace:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Try it yourself

Teóricamente, incluso se puede aplicar una imagen de fondo a elementos de reemplazo como textareas y select, aunque no todos los agentes de usuario manejan esta situación bien.

Además, también hay que añadir que background-image no puede ser heredado. De hecho, todas las propiedades de fondo no pueden ser heredadas.

La repetición de fondo

Si es necesario realizar la repetición de la imagen de fondo en la página, se puede usar La propiedad background-repeat.

El valor de la propiedad repeat hace que la imagen se repita en ambas direcciones horizontal y vertical, como es la práctica común de las imágenes de fondo. repeat-x y repeat-y hacen que la imagen se repita solo en la dirección horizontal o vertical, mientras que no-repeat no permite que la imagen se repita en ninguna dirección.

Por defecto, la imagen de fondo comenzará en la esquina superior izquierda de un elemento. Vea el siguiente ejemplo:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Try it yourself

La ubicación de fondo

Se puede utilizar La propiedad background-positionCambiar la posición de la imagen en el fondo.

El siguiente ejemplo coloca una imagen de fondo en el centro del elemento body:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Hay muchos métodos para proporcionar valores para la propiedad background-position. Primero, se pueden usar algunos palabras clave: top, bottom, left, right y center. Generalmente, estas palabras clave aparecen en pares, aunque no siempre es así. También se pueden usar valores de longitud, como 100px o 5cm, y también se pueden usar valores porcentiles. Los diferentes tipos de valores tienen ligeras diferencias en la colocación de la imagen de fondo.

Palabras clave

Los palabras clave de colocación de la imagen son los más fáciles de entender, actuando de acuerdo con su nombre. Por ejemplo, top right coloca la imagen en la esquina superior derecha de la zona de margen interno del elemento.

De acuerdo con la norma, los palabras clave de posición pueden aparecer en cualquier orden, siempre y cuando no se excedan dos palabras clave - una para la dirección horizontal y otra para la dirección vertical.

Si solo se aparece una palabra clave, se considera que la otra palabra clave es center.

Por lo tanto, si desea que aparezca una imagen en el centro superior de cada párrafo, solo debe declararlo de la siguiente manera:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

A continuación, se presentan los palabras clave equivalentes:

Palabra clave única Palabras clave equivalentes
center center center
top top center o center top
bottom bottom center o center bottom
right right center o center right
left left center o center left

Valores porcentuales

La表现形式 de los valores porcentuales es más compleja. Supongamos que desea usar valores porcentuales para centrar una imagen dentro de su elemento, es fácil:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Esto resultará en una colocación adecuada de la imagen, alineada con el centro del elemento.En otras palabras, los valores porcentuales se aplican tanto al elemento como a la imagen.Es decir, el punto descrito como 50% 50% en la imagen (punto central) se alinea con el punto descrito como 50% 50% en el elemento (punto central).

Si la imagen se encuentra en 0% 0%, su esquina superior izquierda se colocará en la esquina superior izquierda de la zona de margen interno del elemento. Si la ubicación de la imagen es 100% 100%, colocará la esquina inferior derecha de la imagen en la esquina inferior derecha del margen derecho.

Por lo tanto, si desea colocar una imagen en un tercio horizontal y un tercio vertical, puede declararlo de la siguiente manera:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Si solo se proporciona un valor porcentual, ese valor se utilizará como valor horizontal, y se asumirá que el valor vertical es 50%. Esto es similar a los palabras clave.

El valor predeterminado de background-position es 0% 0%, lo que equivaldría a top left en términos funcionales. Esto explica por qué la imagen de fondo se coloca siempre en la esquina superior izquierda de la zona de margen interno del elemento, a menos que se configure una ubicación diferente.

Length values

Length values explain the offset from the top-left corner of the padding area of the element. The offset point is the top-left corner of the image.

For example, if the value is set to 50px 100px, the top-left corner of the image will be 50 pixels to the right and 100 pixels down from the top-left corner of the padding area of the element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Note that this is different from percentage values, because the offset is only from one top-left corner to another top-left corner. That is, the top-left corner of the image aligns with the point specified in the background-position declaration.

Background association

If the document is quite long, then when the document scrolls down, the background image will also scroll with it. When the document scrolls past the position of the image, the image will disappear.

You can use background-attachment propertyPrevent this scrolling. Through this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Try it yourself

The default value of the background-attachment property is scroll, which means that by default, the background will scroll with the document.

CSS Background Example

Set the background color
This example demonstrates how to set the background color for an element.
Set the background color of the text
This example shows how to set the background color of part of the text.
Set the image as background
This example demonstrates how to set the image as the background.
Set the image as background 2
This example demonstrates how to set a background image for multiple elements at the same time.
How to repeat the background image
This example demonstrates how to repeat the background image.
How to repeat the background image vertically
This example demonstrates how to repeat the background image vertically.
How to repeat the background image horizontally
This example demonstrates how to repeat the background image horizontally.
How to display the background image only once
This example demonstrates how to display the background image only once.
How to place the background image
This example demonstrates how to place the background image on the page.
How to position the background image using %
This example demonstrates how to use percentages to position the background image on the page.
How to position the background image using pixels
This example demonstrates how to use pixels to position the background image on the page.
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
All background attributes are declared in one statement
Este ejemplo muestra cómo usar el atributo abreviado para establecer todas las propiedades de fondo en una declaración.

Atributos de fondo CSS

Atributo Descripción
background Atributo abreviado, que permite establecer las propiedades de fondo en una declaración.
background-attachment Si la imagen de fondo está fija o se desplaza con el resto de la página.
background-color Configurar el color de fondo del elemento.
background-image Configurar la imagen como fondo.
background-position Configurar la posición de inicio de la imagen de fondo.
background-repeat Configurar si la imagen de fondo se repite y cómo.