Saltar la navegación

4.3.1. Color y fondo

Elemento Descripción Ejemplo
color Indica el color del texto. Lo admiten casi todas las etiquetas de HTML. El valor de este atributo es un color, con su nombre o su valor RGB. HTML soporta nombres de colores. 
<p style="color:DodgerBlue;">Lorem ipsum...</p>
border Cambia el color de los bordes. 
<h1 style="border:2px solid Violet;">Hello World</h1>
background-color Indica el color de fondo del elemento. El valor de este atributo es un color, con su nombre o su valor RGB. 
<h1 style="background-color:Tomato;">Hello World</h1>
background-image Permite colocar una imagen de fondo del elemento. El valor que toma es el nombre de la imagen con su camino relativo o absoluto 
body {
    background-image: url("fondo.jpg");
}
background-repeat Indica si ha de repetirse la imagen de fondo y, en ese caso, si debe ser horizontal o verticalmente. Los valores que puede tomar son: repeat-x, repeat-y o no-repeat. 
body {
    background-image: url("fondo.gif");
    background-repeat: repeat-x;
}
background-attachment Especifica si la imagen ha de permanecer fija o realizar un scroll. Los valores que pueden tomar son: scroll o fixed. 
body {
    background-image: url("fondo.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
background-position Es una medida, porcentaje o el posicionamiento vertical u horizontal con los valores establecidos que sirve para posicionar una imagen. Los valores que puede tomar son: porcentaje, tamaño, o [top, center, bottom] [left, center, rigth] 
body {
    background-image: url("fondo.jpg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
background Establece en un solo paso cualquiera de las propiedades de background anteriores. Los valores que puede tomar son: background-color, background-image, background-repeat, background-attachment, background-position. 
body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Creado con eXeLearning (Ventana nueva)