Inicio > Crear web desde cero > Poner fondo con estilos CSS

Poner fondo con estilos CSS

Por: Lucas Muñoz
Recomendar lección:

En esta lección a poner un color o una imagen de fondo con CSS a nuestra pagina web.

Poner un color de fondo con CSS

Para poner un color de fondo con CSS utilizaremos background-color, esta propiedad acepta los siguiente atributos:

  • Código hexadecimal: así #000000 este sería el color negro.
  • Nombre: podemos elegir el nombre, aunque no funciona con todos los colores y siempre tendremos que especificarlo en inglés, alguno de ellos son; gray, green, red, etc.

Para este ejemplo usaremos el nombre del color, pero antes tenemos que abrir el archivo estilos.css (que creamos en la lección de hojas de estilos CSS) y escribir esto:

body{background-color:gray}

luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo largo del curso), se tendría que ver así (primero asegurate de haber relacionado la hoja de estilos con el archivo HTML):

Vemos que aplicandole el estilo a la etiqueta <body> funciono perfectamente, se puede ver en la imagen.

 

Poner imagen de fondo con CSS

Ahora si queremos poner una imagen de fondo que se repita (un patrón), lo haremos con el atributo background así:

body{ background: url(ruta/imagen.jpg); }

En este sitio he utilizado esta imagen:

Es una imagen muy chica, pero se repetirá de arriba a abajo y quedará así:

Si nuestra intención es que no se repita, el código sería así:

body{background: url(imagen.jpg) no-repeat;}

Si queremos que repita horizontalmente, sería así:

body{background: url(imagen.jpg)  repeat-x;}

Y si queremos que se repita verticalmente, lo hacemos así:

body{background: url(imagen.jpg) repeat-y;}

Bien, ya hemos aprendido a colocar fondos con CSS y nuestra pagina web empieza a tomar forma, vamos a la siguiente lección.

 

Siguiente lección: Centrar contenido con CSS

¿Te quedaron dudas de esta lección? Unete a la Comunidad de Webmasters y haz tu pregunta, entre todos te ayudaremos.
Preguntas de otros usuarios en la comunidad

Curso: Crear web desde cero

Lecciones relacionadas