Como agregar una imagen de fondo en nuestra sitio web y ademas de que manera al momente de ir bajando con el mouse ese misma imagen se quede estatica, fija, sin moverse.
De esta manera podemos agregarle un fodo a nuestro sitio que diga, que les indique a nuestros usuarios o visitantes que es lo que promovemos, tambien al mismo insertar logos de nuestros patrocinadores.
El div wrapper va hacer el div contenedor de nuestro sitio y dentro de el estaran las etiquetas header para poder ubicar nuestro baner o menu, section donde estara nuestro contenido principal del sitio, footer que ahora puedes agregarle lo que tu quieras como los creditos, algo mejor como widget.
El div wrapper va hacer el div contenedor de nuestro sitio y dentro de el estaran las etiquetas header para poder ubicar nuestro baner o menu, section donde estara nuestro contenido principal del sitio, footer que ahora puedes agregarle lo que tu quieras como los creditos, algo mejor como widget.
INDEX
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Background fixec</title>
<link rel="stylesheet" href="estilo8.css">
</head>
<body>
<div id="wrapper">
<header>
<span>ESTE ES EL HEADER</span>
</header>
<section>
</section>
<footer>
</footer>
</div>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
A
nuestro contenedor principal le agregamos un box-shadow para que a todo su
alrededor tenga una sombre tenie. El fondo principal será de color gris opaco
tenue, esta vez le agrego una altura de 900px porque a la estructura del html
no agregaremos ningún contenido es por eso que a la altura le coloque ese tamaño
lo más conveniente es dejarlo en auto o ni siquiera agrégalo, por lo contrario
del width si
le agregamos un tamaño 960px que sería como un estándar.
#wrapper{
box-shadow: 0px 0px 5px #000;
background-color: #cecece;
height: 900px;
margin: 0 auto;
width: 960px;
}
Contiene
un color gris, altura 150px y un ancho de 100% que quiere decir que tomara el
tamaño exacto del contenedor principal el wrapper.
header
{
background-color: #eee;
height: 150px;
width: 100%;
}
El
span es texto que dice esto es un header, el display:block hace
que ocupe todo el tamaño del header, también
le damos un tipo de letra verdana tamaño 26px negrita, el text –shadow hace el
efecto de tener una sombra al rededor del texto de forma tenue, que se distinga
mejor porque el fondo es un gris claro.
span{
color: #fff;
display: block;
font-family: verdana;
font-weight: bold;
font-size: 26px;
text-align:center;
text-shadow: 1px 1px 1px #000;
}
Al section únicamente se le coloco un color azul oscuro, le dimos las dimensiones de altura de 720px y que ocupe el 100% del ancho que tiene el contenedor principal
section
{
background-color: #22303A;
height: 720px;
width: 100%;
}
Bueno ahora ya estamos en la parte donde colocamos la imagen para nuestro sitio y que sea fija.
Esto
se logra agregando el background le damos la dirección o ubicación de la imagen
a ocupar le asignamos los siguientes parámetros no-repeat par que no se repita
horizontal o verticalmente la centramos y utilizamos el fixed para dejarla
fija, estática.
El
parámetro cover en el background-size es para que si la imagen es pequeña hará
que se expanda y ocupe todo el navegador.
body{
background: url(fondo3.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover;
background-size: cover;
}
No hay comentarios :
Publicar un comentario