¿Sabes como colocar una imagen en HTML? En el siguiente artículo, enseñaremos todo lo que necesitas saber sobre ¿cómo poner una imagen de fondo en HTML?.
¿Cómo poner una imagen de fondo en HTML?
Para saber cómo poner una imagen de fondo en HTML debemos estar conscientes de lo que esto significa; Un HTML, este es un lenguaje de programación que es utilizado para la creación del contenido de páginas web. Esto da lugar a que la visualización de la página sea atractiva al público, dado a una variedad de etiquetas donde se puede configurar, las tipografías, imágenes, vídeos entre otros, básicamente es lo que le da el poder al moderador de editar la página a su gusto.
El HTML fue creado en 1980 por el físico Tim Berners-Lee, quien propuso una nueva forma “hipertexto” para la organización en la cual trabajaba. Estos hipertextos se habían visto mucho antes; los cuales sirven para compartir y acceder a documentos.
Tim Berners-Lee unió fuerzas con un ingeniero de sistemas experimentado llamado Robert Cailliau con quien pudo finalizar su propuesta llamada “Worldwideweb”, y se condujeron a presentarla en una convocatoria, la cual ganaron.
Después de esto, hubo muchas propuestas similares, en 1991 se publicó el primer documento con el nombre de “HTML -tags”, que hasta hoy se puede buscar en línea como una antigüedad en el mundo informático.
Para 1993 el HTML ya era bastante usado, algunas organizaciones sacaban sus versiones y las proponían para fijarlas como un elemento estándar, pero ninguna de estas se consideró como opción. Para esta época se obtuvieron las tablas, etiquetas y formularios que fueron usados durante mucho tiempo.
En cuanto a imágenes de fondo, puede estar unido, basándose en la presentación, por lo que es racional usar CSS para poder constituirlo de forma correcta, de igual forma hablaremos de esto más adelante.
¿Quieres ver un detallado tutorial sobre como poner una imagen de fondo en HTML? Te invitamos visitar el siguiente vídeo:
Colocar un fondo en una página web
Lo primero es usar el atributo background en la etiqueta “Body”, a este se le da el nombre de archivo que queramos emplear de fondo. Puede ser que este archivo se localice en un directorio diferente al de la página web, si esto es así, requeriremos circunscribir la ruta del archivo, es aquí donde es muy importante tomar en cuenta que siempre se necesitará utilizar una ruta.html relacionada al archivo, por ejemplo: “background= fondo.gif”.
Esto permite que la ruta pueda ser fácilmente localizada en el caso de querer cambiarla y lo que logramos es que nuestro archivo se pueda visualizar en el fondo de la página web, es normal que al principio la imagen aparezca en forma de mosaico, de igual manera esto se puede editar.
Fondo en otros elementos
Los fondos pueden aparecer en diferentes elementos como tablas y celdas, además que jugar con ellos es fácil. Para lograr esto volvemos a usar el mismo atributo background solo debemos disponer de otras etiquetas, por ejemplo: “table background= fondo.gif” o “td background= fondo.gif”.
Estos elementos, más la conformación de la página web, son los que daban posibilidad a poder colocar fondo antes de que el leguaje CSS apareciera y se hiciera conocido, lo cual hizo más practico el colocar fondo y la edición de la página web.
Consejos
Las personas que disponen de un dominio desean que al momento de crear su sitio web y personalizarla, esta sea lo más estética posible de acuerdo al tema que se trate. Aquí te podemos dar algunos consejos importantes y necesarios acerca de la utilización de fondos en páginas web.
Colocar un fondo del color similar a la imagen
Es importante destacar que al colocar un fondo en un sitio es preciso disponer del atributo bgcolor, que permite seleccionar un fondo del color que pueda contrastar con el predominante el cual, por los momentos, mantenemos en mosaico.
La mayoría de las personas alguna vez hemos tenido acceso a páginas web donde al momento de cargar, esta no muestra ninguna imagen o texto y una vez que se ha cargado el fondo debidamente podemos apreciar que si había algo escrito. Esto sucede porque los colores no contrastan, sino que mantienen el predeterminado.
Un ejemplo claro, es cuando la imagen de fondo es de un color oscuro y el texto fuese blanco, esto no permitirá que se vea el texto antes de cargar la imagen, lo cual podría ser inconveniente cuando haya un error en la página y el fondo no logre cargar, el texto no podrá verse.
Fondos con imagen de color homogéneo
Es recomendable que al utilizar fondos de imágenes sean de una misma paleta de colores, es decir, que cuando la imagen tiene dos colores o más debemos saber elegir bien el color del texto para que no se mezcle con el fondo y por consiguiente no se pueda visualizar.
Es importante disponer de una gama de colores limpia donde pueda apreciarse cada cosa sin tener problemas. Sugerimos la planeación y selección de una paleta de colores previamente, de esta manera evitaras tener que editar una y otra vez el sitio así podrás observar minuciosamente la estética de la página.
Hacer un fondo lo suficientemente grande
El tamaño del archivo que utilicemos es muy significativo para el trabajo y presentación de la página, es probable que si elegimos un fondo pequeño la computadora trabajará demasiado, repitiendo el mosaico miles de veces a lo largo de la pantalla, lo cual tampoco es muy agradable a la vista (de igual forma esto dependerá de los gustos). Por otro lado, eligiendo un fondo más grande, la computadora podrá trabajar menos al cargar las imágenes, lo cual será más fácil para el consumidor y el moderador.
Textos legibles
Los fondos pueden jugarte en contra cuando estos entorpecen la vista hacia la información; es bastante común que sucedan este tipo de errores. Para evitar esto, la estructura de los colores debe estar debidamente organizada.
Las combinaciones de colores y un fondo agradable darán una impresión atractiva y funcional a tu página, porque no solo se verá bien sino que también podrán leerse esa información que tanto le interesa al consumidor.
Debemos saber tomar una buena decisión al momento de elegir los colores, ya que algunos de los que escogimos pueden lograr la tarea de contrastar, sin embargo, queda el factor que hacer que sea fácil de leer, y puede que colores muy fuertes no logren ese objetivo.
Precaución con las diferentes definiciones de pantalla
Cuando un visitante accede a una página, es importante tener una vista del tamaño de la ventana variable; el fondo puede dar problemas a la hora de adaptarse. Esto puedo ser ocasionado por el hecho de cuando se usa un fondo, se puede ver las dimensiones que están reducidas y la consecuencia es que una persona con dimensiones de alta gama no logra ver la página correctamente.
En conclusión, es necesario tener cuidado con lo que elegimos, esto puede favorécenos o hacer todo lo contrario. Ahora que se entiende lo que debemos tomar en cuenta a la hora de elegir y aplicar nuestro fondo en el sitio web, podemos obtener más visitantes a la página si así lo deseamos, ofreciéndoles funcionalidad y estética.
Nota: Colocar el contenido dentro de una tabla estableciéndole un color de fondo, nos asegurará que no tengamos problemas al querer usar una imagen de la cual nos sintamos inseguros, o que nos haya dado inconvenientes antes.
Fondos con CSS
Anteriormente solo había una manera de poner fondos en los sitios web, y esta era el HTML pero mientras avanza la tecnología, encontramos otras maneras de resolver problemas. Hoy en día es indispensable y razonable usar CSS para lograr colocar un fondo en un sitio web, ya que esta proporciona localizar el fondo en toda la pantalla o usarlo como fondo en un elemento determinado.
Para entender un poco más, empecemos entendiendo qué es CSS y por qué es habitual usarlo en este ámbito; Puede definirse como “lenguaje de hojas de estilo cascada”, es usado para personalizar abiertamente elementos escritos en sitios web. Prácticamente ayuda a que un documento HTML se le pueda estilizar de distintas formas.
Fondo para toda la página
Para colocar un fondo en toda la página debemos ir a la sección “Body” donde personalizaremos la etiqueta “Body” de esta manera: body { background-color: #ffdd90; background-image: url(«mi-fondo.jpg»); }. Aquí estamos aplicando un fondo unicolor con un fondo de archivo.
Las CSS nos dan la oportunidad de aplicar, una imagen de fondo como archivo gráfico, y colocar este encima de un mosaico o un fondo unicolor, editar las dimensiones, agregarle algún desplazamiento, entre otros.
Colocar un fondo sobre un elemento dentro de la página no tiene mucha diferencia con respecto al código. Como por ejemplo, si deseamos poner imágenes dentro de los párrafos o poner algún fondo en algún menú.
Pequeñas partes de la página y definir estilos de etiquetas
La CSS puede ser usado para definir partes pequeñas de las páginas, personaliza las zonas reducidas utilizando el atributo “Style” en la etiqueta que queremos editar y para definir un estilo único de la etiqueta, lo único que tenemos que hacer es volver a usar el atributo “Style” determinando nuestro párrafo en algún color deseado.
Estilo en una parte del sitio web
Para esto necesitaremos ir hacia la etiqueta <Div> donde podemos cambiar el estilo de las diferentes secciones de la página aplicando desde el atributo <Style>, así nos preocuparemos por solo personalizar la sección que escogimos.
Esto son solo algunos ejemplos de lo que puedes hacer con CSS, ya que hay gran variedad de objetivos que puedes lograr con este lenguaje, sin embargo, siempre en bueno no alocarnos y recordar que debemos buscar la funcionalidad y facilidad de la buena lectura.
Si aprendiste como poner una imagen de fondo en HTML, te invitamos a leer otro de nuestros artículos: ¿Qué es XML?.