CSS Hoja de estilos en cascadaHTML5 Demostración y Ejemplos

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

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

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

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

Botón volver arriba