html - Making an image responsive (re-size with browser) -

i'm attempting make image have positioned in center of page, responsive (as in rescaling upon browser sizing while retaining it's position).

i've tried numerous methods (html , css only), including popular 1 add following css:

max-width: 100%; height: auto; width: auto\9; /* ie8 */ 

however not seem working me in chrome or safari.

can point me in right direction? thank you.

my own code below:

<div id="contentbackground"> <div id="pagecontent"> <a href="about.html"> <img src="images/frontbanner.png" alt="click enter" title="click enter" > </a>     </div> </div> 

and css:

#contentbackground {     background: url("../images/frontcontent.jpg");     width: 100%;     min-height: 100%; }  #pagecontent {     margin: 0 auto;     width: 960px;     padding-top: 117px; }  #pagecontent img {     max-width: 100%;     height: auto;     width: auto\9; /* ie8 */  } 

i don't think #pagecontent should fixed width. try making width: 100%; take here: http://jsfiddle.net/dspy5xte/1/

also, image not seems centered.