Cursos Online Gratis

Fondos para capas en HTML5 y CSS3

Podemos también ponerle un fondo a nuestras capas con el atributo background. Ya sea un fondo de un color o una imagen:

background-color

Lo utilizaremos para añadir a la capa un color en valor hexadecimal como fondo, veamos cómo poner una capa con el fondo rojo:

background-color: #FF0000;

background-image

Utilizamos este atributo para añadir una imagen de fondo a nuestra capa, su sintaxis sería la siguiente:

background-image: url(ruta/nombre.extensión);

Podemos usar rutas relativas (/imagenes/prueba.png), o absolutas (http://www.todocursosonline.es/imagenes/prueba.png). En cualquier caso, la imagen debe estar subida a un servidor. Por defecto, en caso de que la imagen sea más pequeña que la capa, la repite tanto en el eje vertical como en el horizontal las veces que sean necesarias hasta rellenar todo el fondo de nuestra capa, podemos evitar esto con background-repeat:

Por último, también podemos escalar la imagen de fondo de nuestra capa con la propiedad background-size, que puede tener como valores:

Hoy hemos visto cómo darle formato y vistosidad a nuestras capas con colores o imagenes de fondo, que destacan y nos ayudan a que la atención del lector vaya directamente hacia ellas, ahora que sabemos darle color a nuestras capas, en el siguiente tema aprenderemos cómo degradar el color de fondo de nuestra capa

SI QUIERES VER EJEMPLOS DEL USO DE LAS PROPIEDADES BACKGROUND PARA CAPAS EN HTML5 Y CSS3, ADEMÁS DE ESTE TEMA DESARROLLADO, HAZ CLIC AQUÍ