Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mark Libario
Mark Libario
9,003 Points

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

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.