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
Recurso Recomendado:
[product id=»2826″]

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

32 thoughts on “Un aliado potente: Los fondos HTML

  1. Carlos Alberto Lopez Reply

    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…

    1. psd a html paso a paso Post author Reply

      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

  2. Yamilet Reply

    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.

    1. psd a html paso a paso Post author Reply

      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

  3. Manuel Sotelo Almanza Reply

    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!

  4. Yile Reply

    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.

    1. psd a html paso a paso Post author Reply

      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

  5. luis campos Reply

    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

    1. Cristian (PSD a HTML) Post author Reply

      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

  6. marco Reply

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

  7. Salmón Reply

    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!

    1. Cristian (PSD a HTML) Post author Reply

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

      Saludos
      Cristian

  8. Francisck Reply

    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.

      1. Francisco Reply

        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.

        1. Cristian (PSD a HTML) Post author Reply

          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

  9. Itzel Reply

    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.

  10. Fernando Reply

    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?

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

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

  11. alberto Reply

    Antes de nada, muchas gracias por todos los conocimientos que nos aporta. Tengo una duda y es que en el caso de utilizar un color de fondo y además una imagen de fondo también, cual sería el código a utilizar.
    Gracias por su respuesta.

    1. Cristian Carrera Post author Reply

      Alberto
      Las imágenes de fondo la manejas con ‘background-image’ y el color de fondo con ‘background-color’.
      Saludos!

  12. oscar david ropero saldaña Reply

    Muchas gracias, tengo un blog de marketing y voy a poner en practica esto que me acabas de enseñar, seguro mi sitio mejorara con estos fondos tan bonitos. GRACIAS.

    1. Cristian Carrera Post author Reply

      Si. Utiliza «opacity: 0.5» para 50% de transparencia. (valores entre 0 y 1)

Deja una respuesta

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

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.