De Psd a Html, reforzando tus diseños: Los fondos de página.

Uno de los elementos que suele quedar en segundo plano de importancia, son los fondos de página Html. Pero si le damos un poco de protagonismo, descubriremos que nuestro sitio será doblemente llamativo e interesante. Y si te vas a dedicar a creación  de templates, o al desarrollo profesional del sitios, deberías poner en práctica lo que voy a mostrarte.

En este artículo descubrirás como aplicar correctamente los fondos de página para resaltar tu sitio.
Si navegas los sitios de templates, observarás la gran calidad de trabajos que existen hoy en día.
Sitios muy llamativos y atractivos, y por lo general tienen muy bien trabajado el fondo de las paginas. No solo desde el diseño, sino desde la correcta implementación.

Imagínate si creas un diseño de página atractivo, con un fondo llamativo que realce el nivel del tu diseño, pero cuando intentas aplicar el fondo en tu HTML, el mismo se distorsiona al verlo en diferentes navegadores. O peor, por no conocer la diversas formas de ármalo, terminas implementando un fondo único y plano.

Déjame explicarte las diferencias entre cada tipo de fondo, y su correcto modo de aplicación.

Existen 3  tipos de fondos:
– Fondos lisos
– Fondos únicos
– Fondos de mosaico o patterns

Fondos Lisos:
Son los fondos en donde existe un solo color, sin ningún tipo de textura ni grafico.

Fondos Únicos:
Son fondos con algún tipo de textura o grafico, que encajan fijos en la pagina en un solo lugar y no se repiten por más que la medida del monitor donde se esté viendo, exceda su tamaño.

Fondos de Mosaico o Patterns:
Son los fondos que una vez aplicados, se repiten llenando el espacio visible de la pagina, sin importar la medida del monitor donde se esté visualizando.

** REPORTE GRATUITO:
Cómo convertir un PSD en HTML en 5 pasos.

Haz Click AQUI para Descargarlo AHORA.

Veremos ahora como se aplica cada tipo de fondo con Html y CSS.

Para definir un fondo de página, solo debemos aplicar algunas propiedades a la etiqueta nativa de HTML, llamada <body>. El <body>, como ya comenté en otros artículos, es una etiqueta que NO definimos nosotros, sino que ya viene definida por defecto. Solo cambiamos los valores de sus propiedades.

Lo que tenemos que hacer para aplicar los fondos es ingresar en nuestro código del archivo CSS, lo siguiente:

body {
propiedad: valor;
}

Las propiedades que usaremos para los fondos, serán :

background-color:
Define el color del fondo. Se le asigna el código hexadecimal del color elegido, por ej: #ff0000 (rojo)

background-image url(nombre_de_imagen.jpg):
Define la imagen de fondo. Se le asigna el camino y nombre del archivo de imagen para el fondo.

background-repeat:
Define como se repetirá o no, la imagen en nuestro fondo.
Se le puede asignar:
repeat (para repetir la imagen horizontal y verticalmente)
repeat-x (para repetir la imagen horizontalmente)
repeat-y (para repetir la imagen verticalmente)
no-repeat (para no repetir la imagen, solo se aplica una sola vez ubicándola arriba a la izquierda)

background-attachment:
Determina si el fondo quedará fijo o no, cuando hagamos scroll en nuestro navegador.
Se le puede asignar:
fixed (fijo, sin scroll)
scroll (con scroll)

background-position:
Determina donde se colocará la imagen de fondo. Si no hay valores, por defecto se coloca arriba a la izquierda. Si le asignamos valores en pixeles, su origen se desplazará a los pixeles que le asignemos, primero en el eje horizontal y luego el vertical.
Ej:
background-position: 10px 10px;
(10 px a la derecha, y 10 px hacia abajo)

EJEMPLOS
Entonces, vamos a ver los diferentes códigos CSS que usaríamos para cada uno de los 3 tipos de fondos que nombré arriba:

Fondo Liso (definimos solo un color de fondo):

body {
background-color: #ff0000;
}

Fondo Unico (se define la imagen de fondo, y se le asigna no repetirla):

body {
background-image: url(fondo_pantalla.jpg);
background-repeat: no-repeat;
}

Fondo de Mosaico o Patterns (se define una imagen y se asigna repetirla horizontal y verticalmente:

body {
background-image: url(fondo_pantalla.jpg);
background-repeat: repeat;
}

Te aconsejo que aunque tengas un fondo fijo o de mosaico, siempre definas un color de fondo para tu pagina que sea similar al predominante de la imagen. Asi, si el fondo tarda en cargar, el usuario puede ver un color parecido al de la imagen.

Te propongo que practiques definiendo diferentes tipos de fondos para tus paginas, y combinando las diferentes propiedades y valores.

Como siempre, te pido que me dejes tu comentario o duda, y te la responderé personalmente.
Saludos!

RECURSO RECOMENDADO:

Si quieres aprender de forma seria y profesional, el arte de la Maquetación Web, te recomiendo el siguiente recurso:
“Curso en video, de Maquetación Web con HTML y CSS”

Anuncios

5 pensamientos en “De Psd a Html, reforzando tus diseños: Los fondos de página.

  1. Antonio L. Gil

    Buen post!
    Este es uno de mis grandes problemas a la hora de pasar los diseños a CSS.
    Sin embargo, un problema muy frecuente es cuando en el centro de la pantalla tengo que poner algún tipo de brillo o algo por el estilo. Esto sigue siendo parte del fondo?
    La cosa es que sólo se puede poner una sola imagen de fondo no?
    Saludos!

    Responder
    1. Psd a Html Autor de la entrada

      Hola Antonio.
      Claro, en ese caso tienes 2 formas de resolverlo:

      1 – Pones el brillo en la misma imgagen de fondo de tu pagina.
      2 – Pones el brillo en otra imagen y esta la usas como fondo de DIV. Quizas, en este caso , la imagen del brillo deberá ser con fondo transparente (.PNG) para que no interfiera con la imagen de fondo.

      Igualmente deberia analizarlo viendo el diseño, porque puede haber otras variantes ya que si lo pones como imagen de fondo, este brillo se repetirá en TODAS tus paginas.
      Y quizas esto no es lo que quieres.

      Me explico??
      Espero te sirva.

      Saludos!
      Cristian

      Responder
      1. Enrique

        Aprovechando esta pregunta… es posible crear 1 fondo para cada página? por ejemplo. Si tengo una web que habla de instrumentos y tengo 3 botones en el menu: guitarras, bajos, baterias
        Puedo tener 3 fondos? 3 jpg y poner en la pagina “guitarras” un fondo con un jpg de guitarras y así sucesivamente para las otras 2 paginas? O solo se puede poner 1 solo fondo para una web entera?

        Gracias

      2. Psd a Html Autor de la entrada

        El fondo del es uno solo para todas la paginas.
        Para hacer lo que dices, deberias usarlo como fondo de

        , pero deberias estudiar como aplicarlo junto con tu fondo UNICO de .

        Saludos!

  2. Antonio L. Gil

    Buenas!
    Si, supongo que poner una segunda imagen como fondo de un div es la opción mas correcta.
    Bueno ya esperando el siguiente post…
    Saludos!

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s