Background images resize in both width and height

Question

How to resize a css background image in proportion when resizing the browser window?

#main {width:950px; height:100%; background:url(image.jpg) no-repeat center bottom}

When browser resize images should no to go under the text, images should shrink the size to keep the same position and distance

Answer 1

@jitendra; Yes you can use background-size property for this but instead of cover give value in 100% like this

CSS:

#image{
    -moz-background-size: 100% 50%;
     background:url("image.jpg") no-repeat center bottom;
}

may be that's work for you

read these article for more: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm , http://robertnyman.com/css3/background-size/background-size.html

Answer 2

This is how i would do it.

http://jsfiddle.net/DpneL/1/

HTML:

<div id="imgCont">
    <img src="http://lorempixum.com/400/200/" alt="" />
</div>

CSS:

#imgCont {
    margin: 0px auto;
    min-width: 300px;
    max-width: 900px;    
    width: expression(document.body.clientWidth < 302? "300px" : document.body.clientWidth > 902? "900px" : "auto"); /* ie6 */
}

img {
    width: 100%;
}

Answer 3

I'd suggest using this jQuery plugin http://johnpatrickgiven.com/jquery/background-resize/

Answer 4

You can use the css background-size. Have a look here: w3c background-size

You are probably after contain or cover.

Alternatively, here is an example with an img tag: http://jsfiddle.net/jwg2s/ Try resizing your browser.

HTML

<div> 
    Heading text Heading text<br/>
    Heading text Heading text<br/>
    <img src="http://secondnaturearomatics.com/images/pear1.jpg" border="1" alt=""/>
</div>

CSS

div {
    text-align: center;
    background: silver;
    width: 90%;
    font-size: 25px;
}
img {
    width: 50%;
}

Answer 5

Proportionally it is not going to be right as you are setting a specific width with a percentage height. So try setting a width and height in according percentages.

If you are using height 100% then it's always going to go under your text as well, so that would explain that as it'll go to 100% of the browser.

You may need to experiment with setting width and height as values such as 80% etc. experiment!