Fondos CSS

CSS tiene 5 propiedades que están disponibles para usar cuando se modifica un fondo

  • background-color
  • background-image
  • background-repeat
  • Background-position
  • Background-attachment - Por favor vea nuestro video para aprender esta propiedad.

background-color

"background-color" es la propiedad que especifica el color de fondo de un elemento.

Se puede especificar el color de fondo usando: Nombre de colores, RGB, HEX.

Ejemplo
<style>
body {  
 background-color: #f4a142;    
} 
</style> 

<body>
</body>
              
Resultado:

                

background-image

"background-image" es la propiedad que se especifica para estableser una imagen en un elemento.

Por defecto una imagen se repite Horizontal y verticalmente.

Ejemplo
<style>
body {  
 background-image:url(lighthouse.jpg);    
} 
</style> 

<body>
</body>
              
Resultado:

                

background-repeat

"background-repeat" es la propiedad que se especifica cuando una imagen se repite, Horizontal y verticalmente.

"no-repeat" se usa cuando quieres que la imagen no se repite.

Por favor vea nuestro video para aprender mas de esta propiedad.

Ejemplo
<style>
body {  
 background-image:url(lighthouse.jpg);background-repeat: no-repeat"    
} 
</style> 

<body>
</body>
              
Resultado:

                

background-position

"background-position" es la propiedad que se especifica cuando queremeos cambiar la posición de la imagen.

Ejemplo
<style>
body {  
 background-image:url(lighthouse.jpg); background-repeat: no-repeat; background-position: right;"    
} 
</style> 

<body>
</body>
              
Resultado: