Web.CSS.Fondos de Pantalla.
Background-color.
Se usa para especificar el color de fondo de un elemento HTML.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
} p {
background-color: yellow;
}
</style>
</head>
<body><h1>Background-color</h1>
<div>
Este texto pertenece al bloque <div>.
<p>Este es el texto del párrafo.</p>
</div>
</body>
</html>
En este ejemplo, se especifica el encabezado de tipo 1 en verde, el bloque <div > en azul claro y el párrafo de color amarillo.
Background-image.
Se utiliza para especificar una imagen de fonde un elemento HTML. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("image.jpg");
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
<p>Aquí un ejemplo de como usar una imagen de fondo.</p>
</body>
</html>
Repetir una imagen horizontal o verticalmente.
Cuando una imagen es más pequeña que el ancho de la página, automáticamente, ésta se replica a sí mismo de forma horizontal y vertical hasta que rellene la pantalla. La forma de hacerlo se puede controlar. Un ejemplo:
Que sólo se repita horizontalmente:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("imagen.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
<p>Una imagen que se repite sólo horizontalmente</p>
</body>
</html>
Que sólo se repita verticalmente:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("imagen.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
<p>Una imagen que se repite sólo verticalmente</p>
</body>
</html>
Una imagen que no se repite:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("imagen.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
<p>Una imagen que no se repite</p>
</body>
</html>
- background-repeat: repeat-y; Una imagen que solo se repite verticalmente.
- background-repeat: repeat-x; Una imagen que sólo se repite horizontalmente.
- background-repeat: no-repeat; Evista que la imgen se duplique horizontal y verticalmente, es decir, se queda en su tamaño original.
Background-position.
Cuando se le indica a una imagen que no se quiere que se duplica para abarcar todo el ancho de la página, ésta se queda en su tamaño original. Pero al ser más pequeña se puede controlar donde se quiere colocar. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("imagen.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
<p>Un ejemplo de como colocar una imagen en la página</p>
</body>
</html>
Existen otros valores que puede tener:
- left top. Izquiera arriba.
- left center. Izquierda centro.
- left bottom. Izquierda abajo.
- right top. Derecha arriba.
- right center. Derecha centro.
- right bottom. Derecho abajo.
- center top. Centro arriba.
- center center. Centro de la página.
- center bottom. Centro abajo.
Background-attachment.
Se utiliza para dar un efecto a la imagen cuando se desplaza:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("imagen.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hola mundo</h1>
<p>Un ejemplo para que una imagen no se desplace y sea fija</p>
</body>
</html>
Background-attachment puede tener la siguientes valores:
- fixed. La imagen no se desplaza, es siempre fija.
- scrooll. Da un efecto a la imagen, el cual se desplaza cuando se usa la rueda del ratón.
