Any tips how to make a background image for a header clear and crisp?

Question

Im practicing on doing a main-header that has a height of a good 600px on my 24" screen.

Im practicing like the one lesson of the LAKE TAHOE. But it seems that the photos i used in the background image looks choppy and not really crisp when I use the background-image: cover.

I try to get images from google search 1920x 1080 something like this. But when I apply it, it still doesnt show the full photo and looks choppy or a bit stretched..

any ideas on how i can grab clear crisp photos for this like this?

<!DOCTYPE html>
<html>

  <head>
    <title>Travel | Philippines</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>

    <header id="top" class="main-header">
      <span class="title"> Asia Travels </span>
      <h1> It's More Fun in the Philippines</h1>
      <p>The Philippines is one of the popular tourists attractions located in Southeast Asia. It is a pacific archipelago that is comprised of 7,107 islands. The country is known for its amazing beaches, clear waters, colorful jeepneys, and so much more.  </p>
      <a href="#navigation"><img class="arrow" src="img/arrow.svg" alt="down arrow"></a>
    </header>

    <div class="primary-content">





    </div>




  </body>







</html>

Heres my CSS code

body {
  padding: 0px;
  margin: 0px;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  margin-bottom: 20px;
}


/*Main Header Styling*/

.main-header {
  color: #fff;
  border: 2px solid #000;
  padding: 150px;
  text-align: center;
  height:450px;
  background-image: url('../img/lagoon1.jpg');
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center;
  margin: auto;
/*  background: linear-gradient(blue, white 100%);*/

}

.title {
  font-size: 2.5em;
  font-family: 'Changa One', Helvetica, Sans-serif;
  line-height: 1.5em;
  text-shadow: 2px 5px 10px #000;
}

h1 {
  font-size: 5em;
  font-family: "Open Sans", script;
  line-height: 2em;
  text-shadow: 3px 15px 10px #000;
}

.main-header p {
  font-size: 1.25em;
  font-family: cursive;
  text-shadow: 5px 5px 5px #000;
  margin-top: 50px;

}

.arrow {
  width: 50px;
  margin: 150px auto;

}

Also even when I have the value cover , it still crops the image depending on the height.

Welcome to the Treehouse Community

Looking to learn something new?

Mark Libario

Mark Libario

Any tips how to make a background image for a header clear and crisp?