title: How to create a cross browser compatible full background image/
body: <p>I have spent a few hours surfing the net and going through some web development books to find an answer. I have an image of size <code>1920x1289</code>. This image is to be used for the background. I want the image to be fixed, remain centered, fill the visible browser area and not cause any scroll bars. I have come across solutions that use pure css such as <code>background-size:cover;</code> and b<code>ackground-size:100% auto;</code>.
  I am familiar with CSS but not jquery. I came across the following script:</p>
  
  <p><a href="http://louisremi.github.com/jquery.backgroundSize.js/demo/" rel="nofollow">http://louisremi.github.com/jquery.backgroundSize.js/demo/</a> </p>
  
  <p>My question is which option is the "best" for my purpose. If I go for the jquery will it cause any performance issues. I will be using this method for a responsive website. I specifically wanted to use the background property instead of an img property for semantics and also clean coding. I would appreciate any suggestions.</p>