Como Insertar Una Imagen de Fondo en html

Como insertar una imagen de fondo en html

¿Estas Aprendiendo a programar en HTML y CSS? ¿Quieres aprender a ponerle fundo a tus páginas HTML? en cualquiera de estas dos preguntas te daremos una repuesta donde enseñamos las distintas formas de colocar una imagen de fondo en html.

Ya se que este es un tema muy simple para muchos principalmente para los de la vieja guardia, pero te has preguntado cuantas personas están empezando en este mundillo de la programación web y a penas saben la descripción de lo que es el lenguaje HTML. No me conteste, yo te podría decir que existen millones de personas a nivel mundial que no saben como insertar una imagen de fondo en html, para esas personas es que va esta pequeña guía donde explicaremos 2 formas de colocar nuestros fondos de páginas con css y directamente en HTML.

¿Como poner una imagen de fondo en html con css?

Para la inserción de imágenes de fondo utilizando CSS lo primero que debemos saber es que esta es la forma recomendada en cualquier situación que vallas a agregar un fondo web a tu proyecto. Para ello lo que vamos hacer es crear una hoja de estilos CSS y la vamos a vincular a nuestro documento HTML en este caso voy hacer referencia a dos archivos index.htmlque sera nuestra pagina principal a la cual les colocaremos el fondo con la imagen.

El segundo archivo les llamaremos style.css ya que es el que va a contener las instrucciones para que le de los estilos a nuestros documentos web, te decía que esta es la forma adecuada de agregar estilos a un proyecto web ya que permite personalizar una página web mucho mas rapido que con el código CSS embebido dentro del mismo documento HTML.

Index.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colocando Imagenes como fondo en nuestro página web</title>
</head>

<body>
<h1>Esto es el contenido de la web</h1>
</body>
</html>

Si te fijas hemos colocado dentro de nuestro codigo HTML una meta etiqueta referenciando al archivo CSS o hoja de estilo.

<link rel="stylesheet" type="text/css" href="style.css">

Lo que hace esta hoja de estilo es aplicarle todos los estilos que contenga a los atributos HTML o etiquetas si le decimos que solo vamos afectar la etiqueta <body> entonces el estilo solo se aplicara a esa etiqueta, para nosotros aplicar un fondo a todo el documento de una forma rápida solo tenemos que indicarle en nuestro archivo CSS que le coloque el fondo a la etiqueta body de la siguiente manera.

@charset "utf-8";
body{
	background-image:url(fondo.jpg);
	
	}

Con esto ya nuestra pagina html tendría el fondo aplicado, pero esta no es la única forma que existe de colocar fondo a un documento HTML también se puede hacer directamente en la etiqueta body aplicándole los estilos css a la misma etiqueta de la siguiente manera.

<body style="background-image:url(fondo.jpg)">

Con esto obtendríamos prácticamente el mismo resultado aunque esta forma no esta recomendada utilizarla por muchas razones y una de la principal es que el código se volvería muy confuso, otra seria que el documento HTML no segue el standar establecido por la W3C, y por muchas otras razones mas que no entrare en detalles.

Espero que les pueda servir de algo este pequeño post, acuerdate que para aprender a caminar hay que gatear y para poder correr primero debemos caminar. Empieza siempre desde cero todo llegará a su tiempo y cuando llegue veras que gozaras con conocimientos que nunca pensaste llegar a tener.

Gracias y hasta una próxima entrega.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada.