Question

这里的第一篇文章 - 到目前为止，这个社区对我来说是一个巨大的帮助。 FWIW，我对这一切都很陌生。

我正在尝试将div上的bg图像放到整个div上，但由于某种原因背景大小：封面不起作用。看看这个：

这是我的相关代码：

/* This area informs the navigation styling! */ 
a { 
text-decoration: none;
}

.nav {
  background-color: #000;
  height: 50px;
}

.nav a:active {
  color:#FFFF00;
}

.nav a:hover {
  color: #FFFF00;
}

.nav a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
  line-height: 25px;
  text-decoration:none;

}

.nav li {
  display: inline;
}

/* This area informs the home page hero image area! */ 

.jumbotron {
  background-image:url('http://i.imgur.com/sJbC24Z.gif');
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;

}



.jumbotron .container {
  position: relative;
  top:0px;
  left:10px;
}

.jumbotron h1 {
  display:inline;
  color: #fff;
  font-size: 72px;
  font-weight: bold;
  background-color: rgba(0,0,0,0.8);

}

.jumbotron p {
  display: inline;
  position: relative;
  top:15px;
  font-size: 20px;
  color: #fff;
  background-color: rgba(0,0,0,0.8);
}


.jumbotron a {
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;
  text-decoration:none;

}

.jumbotron #HeroCTA {
  position: relative;
  top:40px;
  display: inline-block;
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #d81414;
}

/* This area informs the grid on the home page! */ 

#first_row {
   background-color: #000;
   background-repeat: no-repeat;
   background-size: cover;
   height: 300px;
   width: 100%;
}

#Two_By_One {
  background-image: url("http://i.imgur.com/262Gycm.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   display: inline-block;
   height:300px;
   width:50%;
  float:left;
}

#Two_By_Two {
  background-image: url("http://www.gorillavsbear.net/files/2015/01/CATCH.png");
   background-repeat: no-repeat;
   background-size: cover;
   display: inline-block;
  height:300px;
  width:50%;
  float:right;
}

.fullrows {
  text-align: center;
  line-height: 300px;
}

.halfrows {
  text-align: center;
  line-height: 300px;
}

.fullrows h2 {
  color: #fff;
  display:inline;
  text-align: center;
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  background-color: rgba(0,0,0,0.5);
}

.halfrows h2 {
  color: #fff;
  display:inline;
  border-style: solid;
  border-width: 5px;
  border-color: #fff;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  background-color: rgba(0,0,0,0.5);
}

/* This area informs the bottom of the home page!*/ 


.neighborhood-guides {
  position: relative;
  left:10px;
}
    background-color: #efefef;
    border-bottom: 10x solid #dbdbdb;
}

.neighborhood-guides h2 {
    color: #393c3d;
    font-size: 24px;
}

.neighborhood-guides p {
    font-size: 15px;
    margin-bottom: 13px;
}

/* This area informs the CXII UNSOLVED grid! */ 

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; 
    margin:1.66%;
    overflow:hidden;
    background-color: red;
}

.squareBLANK {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
    background-color: #000;
}

#firstsquare {
  background-image: url(http://i.imgur.com/Id6FFuY.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

.content a {
  font-size: 24px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #fff;
  text-decoration:none;
}

.content p {
  color:yellow;
}



/*.learn-more {
  background-color: #000;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.learn-more p {
  color: #fff;
}

.learn-more a {
  color: #00b0ff;
}*/

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
      
        <ul class= "pull-left">
          <li><a href="#">Home</a></li>
        </ul>
        <ul class = "pull-right">
          <li><a href="#">STREAM</a></li>
          <li><a href="#">LIVE SHOWS</a></li>
          <li><a href="#">MERCH</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="neighborhood-guides">
  <div class="container">
    <h2><b>Header.</h2>
    <p><b>Please follow my Spotify playlist here.</b></p>
  </div>
  </div>

  <div class="square">
    <div class="content" id="firstsquare">
      <a href="#">SONG ONE</a>
      <p>This can be a contextualizing, conceptual blurb about the song.</p>
      <p>Learn more about the song <b>here</b>.</p>
    </div>
  </div>

  <div class="squareBLANK">
    <div class="content">
      <a href="#">COMING 5/6</a>
    </div>
  </div>

  <div class="square">
    <div class="content">
      <a href="#">ALEXANDRA</a>
      <p>This can be a contextualizing, conceptual blurb about the song.</p>
      <p>Learn more about the song <b>here</b>.</p>
    </div>
  </div>

  <div class="squareBLANK">
    <div class="content">
      <a href="#">COMING 5/12</a>
    </div>
  </div>

  <div class="squareBLANK">
    <div class="content">
      <a href="#">COMING 5/24</a>
    </div>
  </div>

  <div class="square">
    <div class="content">
      <a href="#">SCULPTURE</a>
       <p>This can be a contextualizing, conceptual blurb about the song.</p>
      <p>Learn more about the song <b>here</b>.</p>
    </div>
  </div>

        
    </div>

  </body>
</html>

感谢您解决此问题的所有帮助。

Answer 1

您可能希望将#firstsquare的高度和宽度css-properties设置为100％，以便填充整个parrent-div。

#firstsquare {
    background-image: url(http://i.imgur.com/Id6FFuY.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

background-repeat：在他的情况下，不需要重复。

在div上跨越图像

1 个答案: