title: Full background image
body: <p>I use background-size:cover so that the background positioning area is completely covered by the background image. But setting it "cover" cuts my background image. Is there any other way to use "cover" without cutting the image ?</p>
  
  <p>the html :</p>
  
  <pre><code>&lt;body&gt;
  &lt;img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250"&gt;
  &lt;p&gt;Hi! I am learning how to make
  my very own web page! I really like
  blueberry muffins and long walks on
  the beach.&lt;/p&gt;
  &lt;input type="email" placeholder="Email"&gt;
  &lt;input type="submit" href="#"&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>the css :</p>
  
  <pre><code>body {
      text-align:center;
      background:url("http://121clicks.com/wp-content/uploads/2012/04/bokeh_photography_03.jpg");
      background-size: cover;
      color:#fff;
      font-family: Helvetica;
  }
  p {
      font-size: 24px;    
  }
  input {
    border: 0;
    padding: 12px;
    font-size: 18px;
  }
  input[type="submit"] {
    background: limegreen;
    color: black;
  }
  </code></pre>