Portada » HTML5 Demostración y Ejemplos » Imagen de fondo página completa usando HTML y CSS

Imagen de fondo página completa usando HTML y CSS

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.

Imagen de fondo página completa usando HTML y CSS
Imagen de fondo página completa usando HTML y CSS

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://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».

Imagen de fondo página completa usando HTML y CSS
Imagen de fondo página completa usando HTML y CSS

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

Ver Demo

DESCARGA

Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad