Saltar navegación

Fondos

O fondo pode ser unha cor simple ou unha imaxe. O fondo soamente se visualiza na área ocupada polo contido e o seu recheo, xa que a cor dos bordes se controla directamente dende os bordes e as zonas das marxes sempre son transparentes.

Para establecer unha cor ou imaxe de fondo na páxina enteira, débese establecer un fondo ao elemento <body>. Se se establece un fondo á páxina, como o valor inicial do fondo dos elementos é transparente, todos os elementos da páxina se visualizan co mesmo fondo a menos que algún elemento especifique o seu propio fondo.

Velaquí as propiedades que temos para engadir fondos as etiquetas:

PropiedadeValores que aceptaDescriciónExemplos
background-color Calquera cor Establece unha cor de fondo para o elemento 
p { background-color: black; }

h1 { background-color: #fb3; }

h2 { background-color: #34a58f; }

h3 { backfround-color: rgb (71, 98, 241); }
background-image URL

Establece unha imaxe de fondo

 
body { background-image: url("imaxe.jpg"); }
p { background-image: url("imaxenes/imaxe.jpg"); }
h1 { background-image: url("http://www.drodicio.com/imaxe.jpg"); }
background-position Establece a posición da imaxe de fondo fixada con background-image 
body { background-position: 10px 30px; }

h1 { background-position: 0px 40px; }

h2 {background-position: left center; }








background-size


Ancho Alto


Establece o tamaño da imaxe de fondo fixada con background-image




body { background-size: 800px 600px; }












background-repeat


    

  • no-repeat (non repite a imaxe)
    • 

  • repeat-x (repite a imaxe en horizontal)
    • 

  • repeat-y (repite a imaxe en vertical)
    • 

  • repeat (repite a imaxe en vertical e horizontal)
    • 



Controla como se repite a imaxe de fondo  fixada con background-image. Por defecto, se a imaxe é mais grande que o elemento HTML do que está de fondo repítese en horizontal e vertical. Podemos modificar este comportamento con este parámetro




body { background-repeat: repeat-y; }












background-clip


    

  • border-box (pinta todo o elemento HTML -incluso o borde-)
    • 

  • padding-box (pinta todo o elemento HTML agás o seu borde)
    • 

  • content-box (pinta o contido do elemento HTML -non pinta nin o seu recheo nin o seu borde-)
    • 



Establece a aréa que pinta o fondo (tanto unha imaxe como unha cor). Podemos establecer 3 valores distintos (pódese ver o comportamento na imaxe inferior)




p { background-clip: border-box; }




h1 { background-clip: content-box; }














Comportamento da propiedade background-clip en CSS


Comportamento da propiedade background-clip en CSS.






background


Cor URL Repetición Posición X Posición Y




Especifica nunha soa liña case todas as propiedades anteriores (empregando os mesmos valores) e nesta orde:


    

  • background-color
    • 

  • background-image
    • 

  • background-repeat
    • 

  • bakground-position
    • 



Se non queremos por algunha destas propiedades, simplemente non a pomos e funcionará igual.






body { background: #ffffff url("imaxe.png") no-repeat right top; }




div { url("imaxe.png") no-repeat right top; }




p { background: url("imaxe.png") no-repeat; }




















Exemplo...








Exemplo das propiedades de fondo


Exemplo das propiedades de texto. Diego Rodicio Álvarez. CC BY-SA


Pulsa no botón de abaixo para descargar este exemplo: