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?
- Descubre o ancho do teu contido. Exemplo: 750 px.
- 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.
- Establece o fondo da imaxe no fondo que desexas ter a cada lado do blog.
- Engade unha rexión branca sobre o fondo.
- Aplique unha sombra sobre a rexión branca que extrúe de cada lado da rexión.
- 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.
- 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 ... 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!
This post has been dugg!
http://www.digg.com/design/Body_Background_Images_Done_Easily
Thanks. Worked well for me!