CSS Color de Fondo

En este tutorial trataremos los aspectos básicos de añadir colores de fondo mediante CSS a elementos con anchos fijos y variables. Como bonificación, también te muestran cómo crear una perfecta respuesta cuadrados de color con sólo unas pocas líneas de código.

Color de fondo del cuerpo

En CSS el fondo se considera el ancho y el alto de un elemento, más algo de relleno y de las fronteras (pero no los márgenes). Con el CSS color de fondo color podemos propiedad el fondo de nuestra página HTML rojo. 

HTML

<head>
  <style>
    body { background-color: #FF0000; }
  </style>
</head>
<body>
</body>
Demo en CodePen

Muy sencillo, a la derecha! Por supuesto, siempre puede utilizar un ID o clase a la </body> de un color de fondo, pero este es el método más sencillo. A continuación, examinaremos las técnicas un par de color del fondo de elementos de página como un <div>.

Elemento de tamaño fijo color de fondo

Para los elementos HTML que son de un tamaño fijo, ya sea en píxeles, ems o porcentajes, agregar un color de fondo es muy fácil. Podemos usar el código de CSS del paso anterior, con el fin de dar a nuestros <div> de altura y de ancho fijo un fondo azul. 

HTML

<head>
  <style>
    div { 
      width: 50%;
      height: 200px;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div></div>
</body>
Demo en CodePen

Si eliminamos la altura o anchura del código de CSS sin embargo, el color de fondo desaparecerá. Pruébelo usted mismo de la demo.

Elemento de tamaño variable color de fondo

Muy bien, excelente, pero lo que si no sabemos el tamaño de nuestro elemento HTML? En la medida en que hay un elemento dentro de la que desea agregar un fondo demasiado, se puede usar la propiedad padding CSS para dar el elemento exterior algo de color. 

HTML

<head>
  <style>
    div {
      padding: 16px;
      background-color: #00FF00;
    }
  </style>
</head>
<body>
  <div>
    <h1>Title with a background color</h1>
  </div>
</body>
Demo en CodePen

Responder cuadrados de color

Esta técnica utiliza una combinación de posicionamiento y ancho fijo con relleno para crear un perfecto cuadrado sensible con un color de fondo. En realidad, puede crear rectángulos de cualquier proporción sólo variando la CSS padding-bottom de propiedad. 

HTML

<head>
  <style>
    .outer { 
      position: relative;
      width: 25%;
      padding-bottom: 25%;
    }
    .inner {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #00FF00; 
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
Demo en CodePen

Si ha encontrado este útil asegúrese de echar un vistazo a las demás tutoriales sobre CSS color del texto, color de enlace and color del marcador.