Un aliado potente: Los fondos HTML

A veces, los fondos html, suelen quedar en segundo plano de importancia. 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 html 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 fondos html llamativos que realcen el nivel del tu diseño, pero cuando intentas aplicar los fondos html, los mismos se distorsionan al verlos 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 los tipo de fondos html, y su correcto modo de aplicación.

Existen 3  tipos de fondos html:
- 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.

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 html 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 html 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!
Cristian
Creador del curso:
curso html y css


Sucribete y recibe los nuevos articulos que publique:

27 pensamientos en “Un aliado potente: Los fondos HTML

  1. Carlos Alberto Lopez

    Hola Cristian:

    Disculpa la demora al responderte, me parece super interesante este curso y me ha sido de gran ayuda, pues soy nuevo en esta parte de paginas web, mi sitio aun esta en construccion y gran parte de su estructura esta hecha en Flash pero pe gustaria fusionar estas dos opciones Flash y Html, si me puedes colaborar con Tip´s para la construccion te agadecere mucho.

    Gracias…

    Responder
    1. psd a html paso a paso Autor

      Hola Carlos
      Gracias por tus comentarios.

      Con respecto a realizar un sitio mix de flash con HTML, te recomiendo que Flash solamente lo uses para los elementos decorativos o que no tienen gran importancia dentro del sitio.
      Todo lo que es conenidos de texto, imagenes y menus, deben ir en HTML para que lo indexen mejor los buscadores como Google y Yahoo.

      Espero haberte ayudado.
      Saludos!
      Cristian

      Responder
  2. Yamilet

    Gracias por el tip, como dices una página con un fondo bonito llama mucho la atención. Ahora estoy aprendiendo a diseñar plantillas joomla pero me es un poco difícil, tienes algún tutorial o algo acerca de eso?

    Saludos.

    Responder
    1. psd a html paso a paso Autor

      Hola Yamilet
      Si realmente los fondos son algo bastante importante a lo que hay que dedicarle tiempo cuando pasas de PSD a HTML, porque despues rinde muchisimo el resultado final.

      Cono respecto a diseñar plantilla de Joomla, por el momento no tengo tutorial, pero estoy trabajando en la creacion de algunos, lo mismo que con los de WordPress.

      Saludos!
      Cristian

      Responder
  3. Manuel Sotelo Almanza

    Hola Cristian, te escribo para agradecer el hecho que compartas tu experiencia y conocimientos, estaba complementando mi aprendizaje en CSS y veo que al ingresar en tu web caí en el lugar ideal, gracias nuevamente. Éxitos!

    Responder
  4. Yile

    Estoy muy contenta con las explicaciones que das, son detalladas, precisas y faciles de entender, llevo un tiempito tratando de llevarmela bien con la programacion web, pero te soy sincera se me ha hecho complicado y con la poca información que he leido en tu página en estos momentos estoy maquetando mi propio sitio. Me encantaria saber si puedes hablar un poco de las galerias de imagenes, ya que deseo montar mi portafolio…Te felicito por lo que haces y éxitos.

    Responder
    1. psd a html paso a paso Autor

      Gracias por tus comentarios Yile.
      Con respecto a las galerías de imágenes, hay muchisimas opciones.
      Si quieres una opcion bien facil, puedes ver el post que hice hace un tiempo aqui en el blog:
      http://www.psdahtmlpasoapaso.com/blog/como-crear-una-galeria-de-imagenes-en-html

      Si deseas algo mas complejo, puedes trabajar con el framework llamado jQuery.
      Puedes acceder a él, en:
      http://jquery.com/

      Puedes adaptarlo, aunque sería ideal que tuvieras conocimientos solidos en maquetacion (XHTML+CSS), y tambien algo de JavaScript.

      Tambien puedes buscar en Google como “galeria de imagenes” o terminos similares.

      Espero haberte ayudado.
      Saludos!
      Cristian

      Responder
  5. luis campos

    hola cristian…. te felicito por tu blog y por la manera de ayudar a las personas pero quiero preguntarte algo a parte del curso psd a html paso a paso… tendras en mente crear un video curso donde enseñe paso a paso a crear plantillas al estilo themeforest con photoshop tambien crear plantillas para wordpress… asi podras complementar los 2 cursos uno de creacion de plantillas y el que tienes en venta de psd a html paso a paso…

    te lo digo amigo ya que nadie se atreve a revelas las tecnicas y los trucos para diseñar plantillas web impactantes y bien hechas y asi poder venderlas ya que esto es un negocio lucrativo… espero tu respuesta cristian

    Responder
    1. Cristian (PSD a HTML) Autor

      Hola Luis
      Gracias por tus comentarios, me alegro mucho que poder ayudar a gente que quiere aprende seriamente sobre maquetacion web.
      Te cuento que tengo varios proyectos de cursos y tutoriales que esto desarrollando, entre ellos, uno de creacion de Themes para WordPress.
      Como sabrás, lleva un tiempo considerable volcar en un curso, material de calidad como a mi me gusta brindarles. :)
      Pero quedate tranquilo que hay mucho mas material que estaré compartiendo con uds.
      Saludos!
      Cristian

      Responder
  6. marco

    muchas gracias cristian por molestarte con esto del html en serio valoro tu trabajo y esfuerzo y de nuevo muchas gracias

    Responder
  7. Salmón

    sin duda un gran dato que no hay que dejar de lado, ya que el fondo puede definir el rumbo de tu web dandole un toque formal, informal y único.

    muchas gracias!

    Responder
    1. Cristian (PSD a HTML) Autor

      Totalmente de acuerdo contigo, Salmón !!!
      Puede marcar una GRAN diferencia.

      Saludos
      Cristian

      Responder
  8. Francisck

    Hola Cristian

    Gracias por los aportes, son muy buenos e interesantes me han sido de mucha ayuda.
    Me gustaria sabes como ponerle un favicon como el usas en tu web. Gracias de nuevo espero sigas brindandonos mas de tus conocimientos.

    Responder
      1. Francisco

        Hola cristian
        Gracias por lo de como poner el favicon, ya lo hice y si me muestra el favicon pero solo en los siguientes exploradores: Chrome y firefox en Internet Explorer no me lo muestra, si pudieras apoyarme te lo agradeciria mucho.

        gracias de nuevo.

        Responder
        1. Cristian (PSD a HTML) Autor

          Francisco
          El favicon deberis funcionar en IE, de hecho si prueba este blog en IE7, te va a mostrar el favicon.

          Revisa el codigo.
          Saludos!
          Cristian

          Responder
  9. Itzel

    Hola Cristian, muchas gracias por el aporte, sabes me impresiona la capacidad que tienes para explicar cada detalle. Creo que ya me estoy volviendo adicta a tus publicaciones ya que no sólo son intersantes si no que son practicas y de mucha ayuda.
    Gracias.

    Responder
  10. Fernando

    Hola, muy bueno. Yo estoy diseñando una web y quiero ponerle un fondo el cual por mucho que cambie la resolución de pantalla, se ajuste a dicha resolucion ella sola. Hasta ahora en el CSS le pongo width: 100% y height: 100%, pero en resoluciones grandes llega un momento en el cual el fondo de pantalla deja de expandirse. Como solucionaria esto?

    Responder
    1. Cristian - PSD a HTML Paso a Paso Autor

      Fernando
      Por favor copia aqui el codigo CSS que estas utilizando para el fondo.
      Cristian

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>