Background image, que se salga de la pantalla

manolo_manolo · #1 (**permalink**) 14/11/2011, 13:03

Hola gente, a ver como lo explico.

El ancho de la web es de 1006px. Pero en el head quiero poner de fondo una imagen de 1280px para que se vea bien en varios monitores, pero quiero que en los monitores de 1024px se vea centrado y que no aparezca el scroll de abajo.

Con un ejemplo creo que será mucho mejor. En la página de cinetube lo tienen. Si os fijais en el head tiene una imagen de 1332px, pero al verla con un monitor de 1024px se ve centrada y no aparece el scroll horizontal. En cinetube lo han hecho con un background en el body (así sí que funciona). Pero yo quisiera que ese background sea del head, para poder poner otra img de fondo en el body. Cuando lo hago en el div head se me sale de la pantalla y aparece el scroll...

Espero que alguien me pueda ayudar, muchas gracias

linuxzero · #2 (**permalink**) 14/11/2011, 15:10

Lo que podes hacer mas sencillo, es tener las 2 imagenes con ambas resoluciones. y cargar la imagen segun la resolucion del cliente que lo esta levantando al sitio, y esto lo podes hacer por js, con la propiedad window.innerWidth, con esto tomas la resolucion del cliente, y segun esta cargas una imagen u otra por javascript.

Es mas sencilla que por css porque sino para eso tambien necesitas js y va a ser mas complicado...

Despues comenta si te funciono, sino buscamos otra alternativa ;)

Saludos!

manolo_manolo · #3 (**permalink**) 14/11/2011, 15:54

Hola linuxzero,

Sí eso lo pensé, pero me gustaría saber qué solución es de css, ya que la web va a tener cero de javascript.

rege · #4 (**permalink**) 15/11/2011, 05:54

Puedes hacerlo del siguiente modo:
Primero ten en cuenta que deberás poner divs contenedores(po ejemplo "wrapper_cabecera") para que ocupen todo el ancho de la ventana, y allí ponerle el background centrado, com fondo del div, no <img> directamente, ya que entonces si te aparecerá el scroll.

seria algo así:

Código:

<div class="wrapper_cabecera">
<div class="cabecera">Contenido que toque</div>
</div>
...

y para el css:

Código:

div.wrapper_cabecera{
width:100%;
background:url(ruta_imagen) center top no-repeat;
}
div.wrapper_cabecera div.cabecera{
width:1006px; /*anchura que quieras*/
margin:0 auto;
}

Con esto tendras el fondo que quieras, se verá la parte que se pueda ver según ancho ventana, y no te saldrá scroll

Se me olvidaba decir, que esto tiene que estar fuera de cualquier div, que limita anchura, y que en el body tampoco debes ponerle width, porque entonces si saldria scroll.

Entonces, con el resto del contenido debería quedar algo así:

Código:

<body>
<div class="wrapper_cabecera">
<div class="cabecera">Contenido que toque de la cabecera</div>
</div>

<div class="contenido">Contenido que toque del resto de la página</div>

linuxzero · #5 (**permalink**) 15/11/2011, 07:08

podes probar tambien utilizar position:fixed; en el css del background. Eso va a hacer que se mantenga en la posicion sin importar el tamaño de la imagen.

manolo_manolo · #6 (**permalink**) 15/11/2011, 21:16

Vale muchas gracias, voy a ponerlo en práctica y os digo algo.

manolo_manolo · #7 (**permalink**) 16/11/2011, 19:48

Me funcionó lo que me dijo rege al dedillo, clavao, eres un crack tío, gracias, gracias a los dos.

mariomon17 · #8 (**permalink**) 17/11/2011, 10:22

Buenas tardes. Como ultimo apunte para simplificar un poco el codigo, yo pondria la imagen de fondo en el mismo contenedor donde va a ir el contenido.

Código HTML:

Ver original<div class="wrapper_cabecera">
<div class="cabecera">Contenido que toque (aqui esta la imagen de fondo) </div>
</div>

Código CSS:

Ver original.cabecera {
width: -----px; /*anchura que quieras*/
margin: 0 auto;
background:url(ruta_imagen) no-repeat;
}

Un saludo ;)

manolo_manolo · #9 (**permalink**) 18/11/2011, 00:01

Hola mariomon17, siempre se agradece cualquier detalle de más.

Viendo lo que propones, al poner un width a la .cabecera ya no podrá salirse la imagen de fondo de la pantalla ya que saldría el scroll del navegador.

De todas formas, gracias!!

mariomon17 · #10 (**permalink**) 18/11/2011, 10:01

En un div nunca saldra scroll debido a la imagen de background.
Pero has dicho que vas a utilizar la misma imagen para todos los tamaños entonces este el modo usado en la mayoria de las webs. Todo el contenido centrado con el mismo tamaño pero si es una resolucion mayor pues se añade espacio a los lados.

Un saludo :)

TiNCHOY2k · #11 (**permalink**) 18/11/2011, 12:15

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ú!

manolo_manolo · #12 (**permalink**) 23/11/2011, 10:36

Muchas gracias gente, os agradezco vuestro tiempo y códigos. De todas formas el código que me facilitó rege me funcionó a la perfección y no eran más que 3 líneas de código simple. Aún así os lo agradezco a tod@s. Thank you!!!!!!