As imaxes de fondo do corpo fanse facilmente

html

Unha boa característica que atoparás en moitos sitios é que a área de contido central aparece para superpoñer a páxina cunha sombra detrás. En realidade é un método bastante sinxelo para que o teu blog se vexa bonito (ou outro sitio web) cunha única imaxe de fondo.

Como se fai?

  1. Descubre o ancho do teu contido. Exemplo: 750 px.
  2. Crea unha imaxe na túa aplicación de ilustración (eu uso Illustrator) máis ampla que a área de contido. Exemplo: 800 px.
  3. Establece o fondo da imaxe no fondo que desexas ter a cada lado do blog.
  4. Engade unha rexión branca sobre o fondo.
  5. Aplique unha sombra sobre a rexión branca que extrúe de cada lado da rexión.
  6. Estableza a área de recorte cun ancho de 1 píxel. Isto fará que a imaxe para descargar sexa agradable e compacta para unha renderización rápida.
  7. Saia a imaxe.

Velaquí como o construín usando Illustrator (teña en conta que teño a superficie de cultivo moito máis alta ... é só para que vexades o que estou a facer):
Fondo con Illustrator

Aquí tes un exemplo de como quedaría a saída coa imaxe de fondo:
Exemplo de imaxe de fondo

Vexa como aplicar a imaxe usando a etiqueta de estilo corporal no seu CSS arquivo.

fondo: # B2B2B2 url ('images / bg.gif') centro de repetición;

Aquí tes unha disección da etiqueta de estilo de fondo:

  • # B2B2B2: define a cor de fondo xeral da páxina. Neste exemplo, é gris para coincidir co gris da imaxe de fondo.
  • url ('images / bg.gif'): define a imaxe de fondo que desexa usar.
  • repeat-y - define a imaxe para repetir no eixo y. Así, a imaxe de fondo repetirase de arriba a abaixo da páxina.
  • centro: define a imaxe no centro da páxina.

Bonito e sinxelo ... unha imaxe, unha etiqueta de estilo!

2 Comentarios

  1. 1
  2. 2

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.