¿La imagen crece con el ancho del navegador?

Heee, I had a question; does anybody know how you can let a background image grow with the browser in terms of Width and perhaps height as well. What do i mean? I have two great examples here;

1 http://www.google.com/nexus/7/

2 http://getbootstrap.com/examples/carousel/

That is kinda what I'm looking for... For now my image only stays centered.. *I don't use bootstrap I made my own responsive design in css.

#heat{ 
background: url(../img/full.jpg) 50% 0 no-repeat;
position: absolute; 
height: 100%;
width: 100%; 
margin: 0 auto;
padding: 0;
}

preguntado el 04 de septiembre de 13 a las 02:09

2 Respuestas

If you are using css3 you can use background-size propiedad:

background-size: 100% 100%

Also you can use the following jquery plugin: http://srobbin.com/jquery-plugins/backstretch/

Respondido el 04 de Septiembre de 13 a las 02:09

Just use this..?

img {
    width:100%;
    height:auto;
}

ejemplo de jsFiddle..

Respondido el 04 de Septiembre de 13 a las 02:09

Yee thats what i mean, i updated my post with my code, it does work for me, maybe it's because i use a div instead of img tag? - Miguel Romano

@MichaelRomano glad it helped! let me know if you need any additional help! - jose crozier

I can't really tell without any coding.. have a live example? - jose crozier

Forgot to update the jsFiddle.. jsfiddle.net/CCdSK/2 .. all I did was remove the min-height/max-height - jose crozier

Thank, the "margin-bottom:-6px;" did it! Thank you very much - Miguel Romano

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.