2
 <style>
  .menu_bkg {
  position: absolute;
  top: 0px;
  width:  100%;
  height: 314px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(http://sphotos-a.xx.fbcdn.net/hphotos-ash3/578806_10151347589633079_1588853150_n.jpg
  );
  }
</style>


<div class="menu_bkg"></div>

the centering of the image works... but would like it to positioned at left:0px when the window veiw width becomes less than the width of the image; and not continue to scroll and cut off to the left the more the window is tightened. Is this even doable? any ideas. Thanks.

ps. i simplifed the code you so can copy and paste into any editor to quickly test.

fhonics
  • 113
  • 9

1 Answers1

0

Use CSS Media Queries - 

@media screen and (min-width : 800px){
  .menu_bkg {
    background-position: 0px 0px;
  )

}
Dipak
  • 11,930
  • 1
  • 30
  • 31
  • ok works...what about browsers that dont support html5... would this be possible? – fhonics Sep 25 '12 at 14:11
  • @fhonics Also check this post - http://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query – Dipak Sep 25 '12 at 14:24