background-color
La propiedad 'background-color' establece el color de fondo de un elemento.
[Sintaxis]
background-color: <color>
color: especifica un valor de color:
Ejemplo[style.css]
body{
background-color: red;
}
[index.html]
<body> <p>This is a paragraph</p> </body>
background-image
La propiedad 'background-image' establece la imagen de fondo de un elemento.
[Sintaxis]
background-image: <uri> | none
uri
La notación funcional utilizada para designar los URI en los valores de las propiedades es "url ()":
background-image: url(images/image.png);
Nota: También debe especificar un color de fondo que se utilizará cuando la imagen no esté disponible. El color de fondo establece el color que se parece a la imagen de fondo establecida.
Ejemplo
Establece el logotipo W3C en la imagen de fondo.
[style.css]
body{
background-image: url(images/logo.png);
}
[index.html]
<body> <p>This is a paragraph</p> </body>
Por defecto, background-image se extiende como un mosaico.
background-repeat
La propiedad 'background-repeat' especifica si la imagen se repite
[Sintaxis]
background-repeat: repeat | repeat-x | repeat-y | no-repeat
- repeat: la imagen se repite tanto horizontal como verticalmente.
- repeat-x: la imagen se repite solo horizontalmente.
- repeat-y: la imagen se repite solo verticalmente
- no-repeat: la imagen no se repite: solo se dibuja una copia de la imagen.
Ejemplo
[style.css]
body{
background-image: url(images/logo.png);
background-repeat: repeat-x;
}
[index.html]
<body> <p>This is a paragraph</p> </body>
Ver también 14.2 The background.
Reto
1. Especifica la imagen para el fondo.
[style.css]
body{
color: #333333;
font-size: 0.9em;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
2. Establece el color y la imagen del fondo en el área de contenido principal.
[style.css]
#wrapper{
width: 900px;
margin: 0px auto;
background-color: #ffffff;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}
Fuente: www.w3.org
No hay comentarios:
Publicar un comentario