The background image of the .feature section is not fully displayed


#1



Hi!
I have a problem with adding a background image for the .feature section in project MOVE. The background image displayed not in a full size though all the properties for background-size are CENTER and COVER...
Can not find any difference between my code and final code.
I had no problems with previous images.
Can anyone help?
Thanks.


<div class="feature">
      <div class="container">
        <h2>MOVE. REST. RECOVER. MOVE.</h2>
      </div>
    </div>
    <div class="supporting">
      <div class="container">
        <h2>GO PREMIUM</h2>
        <p>Receive recommendations based on your activity to level up.</p>
        <a href="#" class="btn">LEARN MORE</a>
      </div>
    </div>

/* Feature */
.feature {
  height: 600px;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center;
  background-size: cover;
  margin: auto;
  padding: auto;
  display: block;
}
.feature .container {
  position: relative;
  top: 200px;
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding: 50px 0 0;
  text-align: center;
}


#2

These properties may be removed. Are you missing the,

text-align: center;

property?


#3

I have removed those properties, but it doesn't help...

But i just found out that if I increase the scale property of the Google Chrome (f.e. to 200%) than the image appears properly.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.