0
Первое сообщение здесь - это сообщество стало огромной помощью для меня до сих пор. FWIW, я чрезвычайно новичок в этом.Закрепление изображения на div
Я пытаюсь установить свой bg-образ на div во весь 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>Спасибо за любые и все помощь по решению этого.
не могли бы вы предоставить jsfiddle для этого? –