As imaxes de fondo do corpo fanse facilmente

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):

Aquí tes un exemplo de como quedaría a saída coa 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!