Search code examples
cssbackground-imagecentercss-position

CSS bkg image absolute & centered, but would also like it left:0px when window is resized

 <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.

Solution

  • Use CSS Media Queries - 

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

}