title: height and width of background picture adapt to each screen size
body: <p>I've been working for some time on my first website. I have the CSS working but I still need to fix some simple, but no so simply issues. In the index.html file I have a background picture attached to the html. So I have a fullscreen background picture attached via CSS to the html tag. This is the CSS code:</p>
  
  <pre><code>html{   background: no-repeat center center fixed; 
  -webkit-background-size: cover;     -moz-background-size: cover;
  -o-background-size: cover;  -ms-background-size: cover;
  background-size: cover; }
  </code></pre>
  
  <p>But I'm loading the pictures via Javascript. My objective is to have an array of pictures and each time a user loads the website or triggers it a random picture will be displayed. So I have this code in Javascript which is working:</p>
  
  <pre><code>$(document).ready(function()  {
    var randomImages = ['img1','img2','img3','img4','img5'];
     var rndNum = Math.floor(Math.random() * randomImages.length);
     $("html").css({
        background: "url(_img/bg/index_rnd/" + randomImages[rndNum] + ".jpg)
        no-repeat"
      });
  });
  </code></pre>
  
  <p>All these codes are working. The pictures are selected from an array and displayed randomly once they are loaded. But I have a great problem which I cannot find a clear answer and I'm stuck. I would like that the <strong>width and the height are rezised</strong>, so the whole picture is displayed in the screen. Of course each screen is different... I read something about innerhieght and innerwidth properties, but I do not know how to proceed. What should I do so the pictures resize to each different screen?</p>
  
  <p>In this moment the pictures are with a resolution of 1024x683. I have a computer with a screen of 15"" and a resolution of 1440x900. My pictures get always a bit more pixelated and to long in height to display, so a part of the picture is cut.</p>
  
  <p>Questions:</p>
  
  <p>What should I do so the pictures resize to each different screen resolution?</p>
  
  <p>A recommended picture resolution so the picture is displayed correctly?</p>
  
  <p>Is there a way to display the picture into the exact size of a screen? Even if its original format gets a bit modified?</p>
  
  <p>REPLY AFTER RECIEVING ANSWER -------------------------------------------------------------
  NEW QUESTION -----------------------------------------------------------------------------</p>
  
  <p>Hello, at last I had time to use the code... It does work properly. I only needed to add the url to my image folder and magic!!! So my code is actually like this: </p>
  
  <pre><code>$(window).load(function() {
      var randomImages = ['img1','img2','img3','img4','img5'];
      var rndNum = Math.floor(Math.random() * randomImages.length);
  
       var $win = $(this);
       var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
          function resize() {
              if (($win.width() / $win.height()) &lt; ($img.width() / $img.height())) {
                $img.css({'height':'100%','width':'auto'});
              } else {
                $img.css({'width':'100%','height':'auto'});
              }
          }
          $win.resize(function() { resize(); }).trigger('resize');
      });
  </code></pre>
  
  <p>Regarding my html I have for now an image with id background. I want to center the image as told. So my question is if I should put this image in a div. If so, how can I make this image center itself in the center of the screen???</p>
  
  <p>Another question, before I had my image attachted to the html and now to an image. Therefore the image  is influencing other elements I have in my body. How can I make that this image be displayed behind all the other elements of my body?!?! For example my logo and header_bg are transformed when my img id="background" is loaded.</p>
  
  <p>Can you help???</p>
  
  <p>This is my html for any doubts...</p>
  
  <pre><code>&lt;body&gt;
          &lt;img id="background" src="" alt="" /&gt;
          &lt;div id="header_img"&gt;
              &lt;nav&gt;
                  &lt;div id="header-bg-left"&gt;
                      &lt;div id="nav-content"&gt;
                          &lt;div id="logo"&gt;
                                  &lt;a href="index.html"&gt;&lt;img alt="./_img/nav/logo.rosa.png" src=""&gt;logo&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div id="categories"&gt;       
                                  &lt;ul&gt;
                                      &lt;li id="nav-quien"&gt;&lt;a href="#"&gt;quien es&lt;/a&gt;
                                          &lt;ul&gt;
                                              &lt;li id="nav-biografia" class="drop1"&gt;&lt;a href="biografia.html"&gt;biografia&lt;/a&gt;&lt;/li&gt;
                                              &lt;li id="nav-curriculum" class="drop2"&gt;&lt;a href="curriculum.html"&gt;curriculum&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li id="nav-galeria" class="marginli"&gt;&lt;a href="gallery.html"&gt;galeria&lt;/a&gt;
                                          &lt;ul&gt;
                                              &lt;li id="nav-gal-nat" class="drop3"&gt;&lt;a href="gallery.html"&gt;paisaje natural&lt;/a&gt;&lt;/li&gt;
                                              &lt;li id="nav-gal-urb" class="drop4"&gt;&lt;a href="gallery.html"&gt;paisaje urbano&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li id="nav-prensa" class="marginli"&gt;&lt;a href="prensa.html"&gt;prensa&lt;/a&gt;&lt;/li&gt;
                                      &lt;li id="nav-links" class="marginli"&gt;&lt;a href="links.html"&gt;links&lt;/a&gt;&lt;/li&gt;
                                      &lt;li id="nav-contacto" class="marginli"&gt;&lt;a href="contacto.html"&gt;contacto&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
          &lt;footer&gt;    
              &lt;div id="footer-bg-left"&gt;
                  &lt;div id="foot-content"&gt;
                      &lt;p&gt;Diseñado por &lt;a href="mailto:daniramirezescudero@gmail.com"&gt;Daniel. R-Escudero&lt;/a&gt; &lt;span&gt;|&lt;/span&gt; Todos los derechos reservados &lt;span&gt;|&lt;/span&gt; &lt;a href="mailto:info@scalesplanet.com"&gt;info@rosasusaeta.com&lt;/a&gt; &lt;span&gt;|&lt;/span&gt;&lt;a href="http://www.linkedin.com/"&gt;&lt;img src="./_img/footer/logo.linked.png"&gt;&lt;/a&gt; &lt;a href="http://www.facebook.com/"&gt;&lt;img src="./_img/footer/logo.facebook.png"&gt;&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/footer&gt;
      &lt;/body&gt;
  </code></pre>