18/11/2011, 12:15
|
| | | Fecha de Ingreso: agosto-2008 Ubicación: Santiago
Mensajes: 20
Antigüedad: 16 años, 3 meses Puntos: 2 | |
 Respuesta: Background image, que se salga de la pantalla
Hoy después de algunos años de ausencia en el foro (a nivel de consulta) considero que estoy un poquit más pro en el tema así que la idea es comenzar a colaborar en esta sección. 
Veamos si entendí lo que tu quieres:
En definitiva lo que quieres en este caso es que la cabecera la imagen se vea bien en las pantallas sin necesidad de que aparezca un scroll en el header.
Hagamos un poco de magia con CSS3 y HTML5:
Código:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
* {padding:0px; margin:0px}
body {background:#888888; font-family:Tahoma, Geneva, sans-serif}
/*··· HTML5 HACK ···*/
header, article {display:block}
header {background:url(http://image.shutterstock.com/display_pic_with_logo/120493/120493,1266687645,1/stock-photo-concrete-wall-and-floor-with-top-light-47076706.jpg); no-repeat top center; overflow:hidden; background-size: cover; -moz-background-size: cover; height:300px; width:100%;
/*
------- HACK PARA IE>9 -------
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://image.shutterstock.com/display_pic_with_logo/120493/120493,1266687645,1/stock-photo-concrete-wall-and-floor-with-top-light-47076706.jpg', sizingMethod='scale');
-------------------------------
*/ }
header div {width:920px; height:240px; padding:0px 20px; margin:30px auto; background:rgba(255, 255, 255, 0.4); }
header div H1 {font-size:36px; line-height:240px; color:red}
article {margin-top:20px}
article DIV {width:920px; min-height:500px; background:rgba(255, 255, 255, 0.4); position:relative; margin:0px auto; padding:20px}
</style>
</head>
<body>
<header>
<div>
<h1>
Contenido
</h1>
</div>
</header>
<article>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique sem nec tellus rutrum sit amet dignissim nisi mollis. Curabitur at justo nibh, et interdum odio. Curabitur sed nulla id nisl dapibus volutpat quis quis augue. Nunc vel turpis tincidunt lacus porttitor tincidunt at non tellus. Sed tincidunt, purus vel laoreet dapibus, tortor arcu feugiat est, a laoreet dui nisl sit amet urna. Sed posuere odio ac sapien aliquam vitae suscipit sem pellentesque. Morbi eu turpis ac risus fermentum tempor. Vestibulum ullamcorper consectetur blandit. Nam sit amet nibh vitae arcu varius eleifend. Praesent posuere molestie magna id fermentum. Vestibulum congue orci a dui hendrerit commodo. Nulla pretium lacinia posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus non tempus felis.</p>
<p>Nam luctus orci non enim tristique varius. Nullam ac leo eu diam lobortis faucibus. Nullam lectus augue, porttitor eget feugiat quis, viverra quis enim. In quis tellus mauris, vel porttitor justo. Nullam dignissim vehicula tellus sed egestas. Proin aliquet nibh quis ipsum lobortis nec bibendum massa suscipit. Proin in diam lectus, quis accumsan neque. Aliquam non mi nulla. Sed ligula nulla, rhoncus eget imperdiet sit amet, suscipit sit amet velit.</p>
<p>Duis at velit sem, et ornare libero. Vivamus nisl lorem, sollicitudin a porta id, rutrum sit amet nibh. Nullam mattis sagittis mi non condimentum. Sed pretium faucibus ultricies. Integer mauris tellus, rutrum sed ullamcorper at, ornare et ante. Maecenas bibendum, tellus eu accumsan tristique, ante eros luctus lorem, tristique sagittis diam urna in diam. Phasellus quis est a felis tincidunt volutpat in non metus. Vestibulum at nisl enim, tincidunt scelerisque mi. Suspendisse laoreet suscipit mi ac porttitor. Duis tincidunt, justo at adipiscing elementum, enim dui pharetra odio, pretium rhoncus quam eros et eros. Nulla id justo mauris. Quisque a ligula a felis lacinia ultricies a ut nisl. Proin dapibus tortor sit amet lacus blandit vitae congue nisi sodales. Donec tincidunt condimentum libero, sit amet sagittis metus mattis et. Phasellus eget pretium purus. Integer ac neque id lorem tempus elementum nec sit amet dui.</p>
</div>
</article>
</body>
</html>
La imagen del header se auto ajusta al tamaño del ancho de la pantalla y se mantiene centrada en el header.
Espero que te sea util el código.
Salú! |