Menu
The Code
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
is not recognized and i do not know why. I took a look with Firebug and the second child is not even listed. I simply want to set the background to the image provided in the Link you see above.
Here is the complete sourcecode.
CSS
.inner {
background-color: #000;
height: 100%;
padding: 35px;
text-align: justify;
width: 100%;
color: #fff;
}
.inner-video,
.inner-image {
padding: 0px;
}
.inner-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.inner-image:nth-child(2) {
background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="inner">
This is a Test!
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
<div class="col-md-4">
<div class="inner inner-image">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="inner inner-video">
<iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe>
</div>
</div>
<div class="col-md-6">
<div class="inner">
This is a Test!
</div>
</div>
</div>
</div>
</body>
</html>
952
asked Dec 28 '25 07:12
You're selecting the wrong class. :nth-child(2) will not be selected for .inner-image because it is always the only child. You should select the .image-container. :nth-child refers to itself and not its children.
.image-container:nth-child(2) .inner-image {
/* styles here */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
