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

colton wollin
colton wollin
1,575 Points
Posted by colton wollin
colton wollin
1,575 Points

How to resize my img to cover my heading block.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Design</title>
  <link rel="stylesheet" type="text/css" href="treehouse.css">
</head>
<body>
  <div class="wrapper">


  <div class="main-head">
    <header>
    <h1>Design and Fundamentals</h1>
    </header>
  </div>

  <div class="navigation">
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Pricing</li>
        <li>Contact</li>
      </ul>

    </nav>

  </div>

  <div class="wrapper">

  <div id="main-body">
    <section>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </section>

  </div>

    </div>

  <div class="footer">
    &copy; 2017 Design and Fundementals
    </div>
  </div>



</body>
</html>

.wrapper {
 padding-left: 10px;
 padding-right: 10px;

}

.main-head {
  display: block;
  background-image: url('img/designheader1.jpg');
  width: 100%;
  height: 200px;
  background-size: cover;

}

Basically I want it so that I can use my full image look (it's 4000,6000) so it should definitely work. I want to resize it to 500 height and 100% width and I don't want it to screw up the resolution.

1 Answer

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You say you "want to resize it to 500 height and 100% width", but you're using it as a background for an element that you have currently constrained to a height of 200px. Did you want to change that to 500px?

Then you need to decide if you want to see the whole image (with resolution reduction and aspect alteration), most of the image (with resolution reduction), or just part of the image (with full resolution). You can choose among these using the "background-size" property. For more info see the MDN documentation page.