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″]
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…
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
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.
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
Hola, saludos y felicidades cada explicación que das es muy clara e interesante.
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!
Por nada Manuel.
Saludos!
Cristian
todo esta muy interesante
Gracias Darwing.
Saludos!
Cristian
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.
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
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
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
muchas gracias cristian por molestarte con esto del html en serio valoro tu trabajo y esfuerzo y de nuevo muchas gracias
Por nada Marco.
Me alegra mucho que te haya servido.
Saludos!
Cristian
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!
Totalmente de acuerdo contigo, Salmón !!!
Puede marcar una GRAN diferencia.
Saludos
Cristian
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.
Hola Francisck
Gracias por tus comentarios.
Hace tiempo publique un articulo completo sobre como generar y aplicar un Favicon.
Lo puedes encontran en:
http://www.psdahtmlpasoapaso.com/blog/como-crear-favicon-barra-de-urls-favoritos-y-wordpress
Saludos!
Cristian
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.
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
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.
Gracias Itzel
Me alegra mucho haberte ayudado.
🙂
Saludos!
Cristian
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?
Fernando
Por favor copia aqui el codigo CSS que estas utilizando para el fondo.
Cristian
Gracias por tus consejos y aportes en esta parte tan importante en la maquetacion web.
Por nada amigo.
Me alegro que te haya servido.
Saludos!
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.
Alberto
Las imágenes de fondo la manejas con ‘background-image’ y el color de fondo con ‘background-color’.
Saludos!
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.
hola, por favor, es posible hacer que la imagen de fondo sea algo transparente? gracias
Si. Utiliza «opacity: 0.5» para 50% de transparencia. (valores entre 0 y 1)