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.
Ver índice del contenido
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:
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.
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:
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.
[popup_anything id=»4273″]