title: full image without stretch or repeat with high quality pixel
body: <p>how can i put a full background image without stretch or repeat the image with high quality pixel i don't want image look like stretching image</p>
  
  <p>html code</p>
  
  <pre><code>&lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                  &lt;!-- Set the first background image using inline CSS below. --&gt;
                  &lt;div class="fill fill" style="background-image:url('img/intro%205.jpg');"&gt;&lt;/div&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;h1&gt;P-DECO&lt;/h1&gt;
                  &lt;p&gt;YOUR   PARTNER   TO   THE   TOP &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>.fill {
      width: 100%;
      height:300px;
      background-position:center ;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      background-size: contain;
      -o-background-size:contain;
      background-repeat: no-repeat; background-size: 100% 100%;background-origin: content-box;
      z-index: 1030;
      position: fixed; 
  }
  </code></pre>