Imágenes de fondo del cuerpo hechas fácilmente

html

Una buena característica que encontrará en muchos sitios es donde el área de contenido central parece superponerse a la página con una sombra paralela detrás de ella. En realidad, es un método bastante simple para hacer que su blog se vea bien (u otro sitio web) con una sola imagen de fondo.

¿Cómo se realiza?

  1. Averigua qué tan amplio es tu contenido. Ejemplo: 750px.
  2. Cree una imagen en su aplicación de ilustración (yo uso Illustrator) más ancha que el área de contenido. Ejemplo: 800px.
  3. Establezca el fondo de la imagen en el fondo que desea tener en cada lado del blog.
  4. Agrega una región blanca sobre el fondo.
  5. Aplique una sombra en la región blanca que sobresale de ambos lados de la región.
  6. Establezca el área de recorte con un ancho de 1 píxel de altura. Esto hará que la imagen para descargar sea agradable y compacta para una reproducción rápida.
  7. Salida de la imagen.

Así es como lo construí usando Illustrator (tenga en cuenta que tengo el área de recorte mucho más alta ... eso es solo para que pueda ver lo que estoy haciendo):
Fondo con Illustrator

Aquí hay un ejemplo de cómo se vería la salida con la imagen de fondo:
Ejemplo de imagen de fondo

A continuación, le mostramos cómo aplicar la imagen con la etiqueta de estilo de su cuerpo en su CO archivo.

fondo: # B2B2B2 url ('images / bg.gif') repeat-y center;

Aquí hay una disección de la etiqueta de estilo de fondo:

  • # B2B2B2: establece el color de fondo general de la página. En este ejemplo, es gris para que coincida con el gris de la imagen de fondo.
  • url ('images / bg.gif'): establece la imagen de fondo que le gustaría usar.
  • repeat-y: establece que la imagen se repita en el eje y. Entonces, la imagen de fondo se repetirá de arriba a abajo de la página.
  • centro: establece la imagen en el centro de la página.

Agradable y fácil ... ¡una imagen, una etiqueta de estilo!

2 Comentarios

  1. 1
  2. 2

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.