La propiedad Background color e imagen de fondo en CSS

Anterior
Avanzar

Es momento de aprender a controlar el fondo de los elementos HTML mediante CSS, el fantástico lenguaje de estilo que venimos aprendiendo. CSS nos permite poner color al fondo de los bloques de contenido, además de colores, también podemos colocar imágenes de fondo, la misma que puede ser ajustada mediante propiedades y atributos.

La propiedad Background color

La propiedad background-color no permite establecer el color de fondo para un elemento HTML, simplemente declaramos y en su valor colocamos el color deseado.

Los valores para colores de fondo

En caso del color de fondo, el valor es un color que puede presentarse en los formatos que venimos conociendo desde anteriores lecciones.

  • Palabra clave.- el nombre del color en ingles.
  • Hexadecimal.- el color representado por un # seguido de 6 caracteres alfanuméricos que representan un color específico.
  • RGB.- también es válido el valor en RGB (rojo, verde, azul)

Ejemplo de color de fondo en CSS código

Para el ejemplo emplearemos además propiedades que ya aprendimos en lecciones anteriores para darle más estética al ejemplo.

HTML

<div class="contenedor">
<p class="morado"> Este es un párrafo con color de fondo morado (palabra clave)</p>

<p class="verde"> Este es un párrafo con color de fondo verde (hexadecimal)</p>

<p class="naranja"> Este es un párrafo con color de fondo naranja (RGB)</p>
</div>
  

CSS

div.contenedor {background-color:#abbcff; padding:40px;}

p  {padding: 20px;}

p.morado {background-color: purple;}

p.verde {background-color: #009846}

p.naranja {background-color: rgb(239, 127, 26);	}

Resultado:

Te recomendamos leer:  Selectores CSS - Reglas y sintaxis

Si deseas colocar un color de fondo a toda la página web ¿Cómo lo harías? Pues sencillo, simplemente apuntas a la etiqueta <body> y estableces la propiedad background-color con el valor del color que quieras, así: body {background-color: yellow;}

Poner un color de fondo a los elementos HTML con CSS es muy fácil, hará que nuestra página web adquiera vida y eterna alegría…

Alex.

La propiedad background-image

La propiedad background-image nos permite establecer una imagen de fondo a un elemento, es tan simple como declarar la propiedad y en su valor establecer cuál será la imagen que aparezca.

El valor de la propiedad background-color tiene algo en especial, se trata de indicar la imagen de la siguiente manera: url("archivo o URL"); Si la imagen está en la misma carpeta del documento HTML, entonces se coloca el nombre del archivo con su respectiva extensión, en caso el archivo este en otra dirección, entonces indicamos dicha dirección en lugar de colocar solo el nombre.

Ejemplo de imagen de fondo CSS

Crearemos un contenedor con ancho máximo de 500px y altura mínima de 350px, dentro de ella irá un párrafo con fondo amarillo claro; por otro lado tenemos una imagen de 200x122px, el cual será puesto como fundo del contenedor mediante CSS. Veamos.

Código HTML

<div class="fondoimg"> <p>Párrafo dentro de un bloque con fondo de imagen.</p> </div>

Código CSS

div.fondoimg {
  max-width: 500px;
  min-height: 350px;
  background-image: url("fondo.jpg");}


p {background-color: #fff345;}


Resultado:

Note que la imagen empieza a reproducirse tanto horizontal y verticalmente desde la esquina superior izquierda del bloque, hasta cubrir todo el bloque con class="fondoimg", este hecho ocurre por defecto.

Te recomendamos leer:  Estilos CSS para tablas

Poner imagen de fondo a toda la página web, es tan sencillo como apuntar a la etiqueta body de la página.

La propiedad imagen de fondo puede ser heredada a los elementos hijo, para ello simplemente establecemos el valor de background-image del hijo en inherit.

Varias imágenes de fondo en CSS

Es posible establecer más de una imagen como fondo, el primero prevalecerá, si en caso no existe entonces el segundo y así sucesivamente; para especificar más de una imagen, simplemente separa con comas las url, en el valor, por ejemplo: url("gatito.png"), url("https://unnsitioimg.net/imagenes/gatito.png");

La propiedad background-repeat

La propiedad background-repeat nos permite determinar la dirección en que se repite la imagen de fondo o si deseas que no se repita, para ello haremos uso de los siguientes valores:

Valores de la propiedad background-repeat

  • repeat-x.- solo repite en dirección x u horizontalmente.
  • repeat-y.- solo repite en dirección y o verticalmente.
  • no-repeat.- no se repite en ninguna dirección.

Establecer el valor a inherit (heredar)

La propiedad background-repeat puede ser heredada a los elementos hijo siempre y cuando se establece el valor heredar en dichos elementos hijo.

Por ejemplo si establecemos que la imagen de fondo se repite en dirección horizontal para el cuerpo de la página web (body) y por otro lado contamos con un bloque de contenido con class="hijo" dentro del cuerpo e indicamos el bloque hijo hereda el estilo de repetir fondo mediante el valor inherit, entonces dicho bloque también tendrá la imagen de fondo repitiendo en la misma dirección que el padre (body)

Ejemplo de imagen de fondo heredado

HTML

<body>
  <div class="hijo"> BOLQUE HIJO </div>
</body>

CSS

body {
  background-image: url("fondo.jpg");
  background-repeat: repeat-x;
}

div.hijo {
  background-image: url("corazon.png");
  background-repeat: inherit;
  border: 2px solid yellow;
  width:400px;
  height: 180px;
}

Resultado:

Te recomendamos leer:  Ejemplos de CSS y ejercicios resueltos

Podemos observar que el elemento con class="hijo" obedece al estilo del elemento padre, repite la imagen de fondo solo en dirección horizontal.

La propiedad Background-attachment

La propiedad background-attachment nos permite definir si la imagen de fondo se queda fija o se mueve en la pantalla cuando el usuario se desplace sobre ella o haga scroll; para ello haremos uso de los valores que corresponden.

Valores para background-attachment

  • scroll.- hace que la imagen de fondo se mueva en la pantalla junto con el elemento que lo contiene.
  • fixed.- la imagen de fondo queda fija mientras el bloque se mueve con el resto del contenido.

El valor de background-attachment también puede ser heredado de un elemento padre a un elemento hijo, para ello se emplea inherit como valor para elemento hijo.

Ejemplo de imagen de fondo fijo con CSS

Código HTML

<div class="movil"> <p>Párrafo dentro de un bloque con imagen de fondo movil.</div>


<div class="fijo">Párrafo dentro de un bloque con imagende fondo fijo.</div>

Código CSS

div.movil {  
  background-image: url("fondo.jpg");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

div.fijo {  
  background-image: url("fondo.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

El código que tenemos hará que el primer bloque tenga una imagen de fondo que se mueve junto con el bloque que lo contiene y el segundo caso hará que se quede fija hasta que el bloque que lo contiene haya terminado de pasar cuando el usuario se desplace por la pantalla.

Para comprobar el resultado te dejo una pequeña tarea y es el siguiente: establece dimensiones adecuadas a los bloques, crea párrafos y los elementos que desees en cada bloque, de tal manera que sea necesario un desplazamiento en la pantalla, establece imágenes de fondo y prueba que uno se mueve y la otra queda fija.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos