CODEWITHSUNDEEP
jquerycssimagebrowserresize
Michael Romano
Michael Romano

Reputation: 30

Image grows with browser width?

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;
}

Upvotes: 1

Views: 88

Answers (2)

Aguardientico
Aguardientico

Reputation: 7779

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

background-size: 100% 100%

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

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240868

Just use this..?

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

jsFiddle example..

Upvotes: 1

Related Questions