 |
Propiedades relacionadas al fondo (background)
Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un archivo de imagen. Las propiedades relacionadas al background y sus valores son:
- background-color La propiedad background-color especifica el color de fondo de un elemento.
- background-image La propiedad background-image especifica una imagen para usar como fondo de un elemento.
- background-repeat De forma predeterminada, la propiedad background-image repite una imagen tanto horizontal como verticalmente para limitar esto se debe colocar background-repeat
- background-position La propiedad background-position se utiliza para especificar la posición de la imagen de fondo.
- background-attachment La propiedad background-attachment especifica si la imagen de fondo debe desplazarse o ser fija (no se desplazará con el resto de la página):
Veamos un ejemplo de disponer una imagen sobre el fondo de la página:
<html>
<head>
<style>
body { background-color: lightblue;
} </style> </head> <body>
<h1>Hola mundo</h1>
<p>Esta página es celete con el comando background-color!</p>
</body>
</html>
Opciones
- La propiedad background-color permite el color de fondo con un valor HEX: background-color: #92a8d1;
- La propiedad background-color permite el color de fondo con un valor RGB background-color: rgb(201, 76, 76);
- a propiedad background-color permite el color de fondo con un valor HSL: background-color: hsl(89, 43%, 51%)
<html>
<head>
<style>
body { background-image : url("imagenes/fondo1.gif");
} </style> </head> <body>
<h1>Hola mundo</h1>
<p>Esta página es celete con el comando background-color!</p>
</body>
</html>
background-repeat
La propiedad background-repeat establece si y cómo se repetirá una imagen de fondo. Por defecto, una imagen de fondo se repite tanto vertical como horizontalmente.
- background-repeat: repeat-y; repite la imagen en eje Y
- background-repeat: repeat-x; repite la imagen en eje X
Sugerencia: La imagen de fondo se coloca de acuerdo con la propiedad background-position . Si no se especifica una posición de fondo, la imagen siempre se coloca en la esquina superior izquierda del elemento.
<html>
<head>
<style>
body { background-image : url("imagenes/fondo1.gif");
background-repeat: repeat-x;;
} </style> </head> <body>
<h1>Hola mundo</h1>
<p>Esta página es celete con el comando background-color!</p>
</body>
</html>
Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de fondo del contenido de un elemento HTML (body, h1, h2, p, etc.).
Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un archivo de imagen. Las propiedades relacionadas al background y sus valores son:
background-image
background-repeat
background-position
background-attachment
Veamos un ejemplo de disponer una imagen sobre el fondo de la página:
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
</body>
</html>
La hoja de estilo queda:
La única propiedad que hemos inicializado es background-image indicando el nombre del archivo de imagen a mostrar.
La imagen se repite en x e y hasta llenar la página por completo, ya que por defecto background-repeat está inicializada con el valor repeat, probar de modificar el estilo primero con:
Luego con:
Y por último:
Tener en cuenta que podemos aplicar una imagen a otros elementos de HTML (h1, h2, h3, p, etc.)
La última propiedad background-position podemos indicar la posición de la imagen según los siguientes valores:
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Para que tenga sentido esta propiedad debemos inicializar la propiedad background-repeat con el valor no-repeat.
Por ejemplo:
background-repeat:no-repeat;
background-position:20% 50%; }
Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba.
La siguiente regla:
background-repeat:no-repeat;
background-position:400px 10px; }
Dispone la imagen 400 pixeles desde la derecha y 10 píxeles desde arriba.
La regla:
background-repeat:no-repeat;
background-position:top right; }
Dispone la imagen en la parte superior a la derecha.