Bienvenidos! Ya nos encontramos en la tercera clase de nuestro curso de Introducción a CSS 3.
En la clase anterior, vimos como formatear texto, viendo a traves de los colores el resultado. En esta ocasión, aprenderemos a formatear uno de los elementos más importantes en una página web; el fondo.
A lo largo de esta clase, conoceremos cuáles son las posibilidades que tenemos a la hora de dar formato al fondo de nuestra página web.
¡Manos al teclado!
RESUMEN DEL VÍDEO:
En esta clase veremos cómo cambiar el fondo. Para cambiar el color usaremos la propiedad “background-color” Para poner una imagen usaremos background-image.
Para establecer una posición podemos usar background-position. Para evitar que una imagen se repita usaremos background-repeat. Para fijar una imagen usaremos background-attachment: fixed.
Podemos definir el tamaño también con background-size. Podemos definir el origen de la imagen con background-origin.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Esta clase es de fondos</title>
<style>
body{
background-color: yellow;
background-image: url('htpp://estaticos.elmundo.es/assets/multimedia/imagenes/2015/11/13/14474300157302.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 600px 400px;
background-position: top center;
}
div {
height: 200px;
width: 200px;
background-color: #F545CD;
background-image: url('foto-mujer.jpg');
background-repeat: no-repeat;
padding: 20px;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
Haciendo uso de los diferentes métodos y formas que estamos viendo, observarás como las posibilidades de estilos en tu página web aumentan potencialmente.
¡Nos vemos en la siguiente clase!