Imagen de fondo página completa usando HTML y CSS. En esta publicación mostraremos como podemos colocar una imagen de fondo responsiva dentro de nuestro archivo HTML5. Sin embargo, para lograr este objetivo usaremos HTML5 y CSS.
Si bien podemos colocar un color hexadecimal como color de fondo, también podemos colocar una imagen.
Imagen de fondo página completa usando HTML y CSS
Para agregar la imagen de fondo de la página completa sólo se necesita un paso:
Necesitaremos de tres archivos que detallaremos a continuación:
- Un fichero llamado «index.html»
- En estilos usaremos el fichero «style.css»
- Una imagen para ponerlo de fondo mediante estilos «principal.jpg»
Si lo visualizamos en el navegador tendrá la siguiente interfaz gráfica.
Ahora la idea es implementar los ficheros de manera correcta.
1. Hacemos un archivo HTML y lo guardamos con un nombre index. html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demostración - Imagen de fondo página completa usando HTML y CSS</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="principal"> <h1>Imagen de fondo página completa usando<br> HTML y CSS</h1> <h2><p><div class="readMore"><a target="_blank" href="https://www.baulphp.com/">BaulPHP.com</a></div></p></h2> </div> </body> </html>
2. Contenido del fichero «style.css»
@charset "utf-8";
/* CSS Document */
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family:verdana;
background-color:#cccccc;
background: url(../images/principal.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
#principal
{
width:1020px;
text-align:center;
margin:0 auto;
padding:0px;
}
h1
{
margin-top:150px;
font-size:38px;
color:#000;
background:#CCC;
-webkit-opacity:0.4;
-moz-opacity:0.4;
-o-opacity:0.4;
-ms-opacity:0.4;
opacity:0.4;
}
h1 p
{
font-size:18px;
}
.readMore {
color: #7b7a79;
margin-top: 10px;
}
.readMore a {
background: #00a8ff;
background-color: rgb(0, 168, 255);
color: #fff;
display: inline-block;
padding: 4px 10px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
text-decoration:none;
}En este paso creamos una estructura HTML5 simple y usamos la propiedad de fondo de CSS para agregar imagen de fondo en nuestra etiqueta «BODY».
CONCLUSIÓN
Empezare comentándoles que existen varias formas de colocar imágenes de fondo en las capas «<div>», en algunos casos se utiliza JavaScript y/o jQuery. La idea es obtener el resultado más preciso a lo que deseamos.
En este artículo, muestro como implementar una imagen de fondo responsiva dentro de nuestro «BODY», sin que la imagen sufra algún recorte de la imagen que será mostrada al usuario final.
Ahora, ustedes pueden implementarlo en sus proyectos web e inclusive darle opacidad para que no sea tan intrusiva por los colores fuertes de la imagen.
Por lo tanto, usted puede modificar este código para sus requerimientos particulares para sus proyectos web. Y por favor no olviden de comentar si tienen alguna duda.
Les dejare una ejemplo en línea para que ustedes puedan observan cómo funciona el siguiente código.
DEMOSTRACIÓN
[divider]
[button-blue url=»https://www.baulphp.com/demo/Imagen-de-fondo-pagina%20completa-usando-HTML-y-CSS/» target=»_blank» position=»left»]Ver Demo[/button-blue]
[divider]
DESCARGA
imagen-de-fondo-pagina-completa-usando-html-y-css