Accessing <img> inside nested <div> in CSS - css

Question

I'm trying to fill carousel-background image fill carousel. But I'm not able to access tag from css.
<div id="carouselSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!-- data-slide-to part -->
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-background"><img src="img/portfolio/fullsize/1.jpg"></div>
<div class="carousel-container">
<div class="carousel-caption">
<h2>We are xyz</h2>
<p>We help you to blah blah blah!</p>
Get Started
</div> <!--carousel-content-->
</div> <!--carousel-container-->
</div> <!--carousel-item-->
<div class="carousel-item">
<!-- similar content with <img>-->
</div> <!--carousel-item-->
<div class="carousel-item">
<!-- similar content with <img>-->
</div> <!--carousel-item-->
</div> <!--carousel-inner-->
<a class="carousel-control-prev" href="#carouselSlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!--carousel-->
CSS File:
#carouselSlider .carousel-inner .carousel-item .carousel-background img{
width: 100%;
height:400px;
}
I'm not able to edit image. Also is there a way to fill image in carousel without stretching it?

Answer 1

You can add classes to images. That line of code should look like
<div class="carousel-background"><img class="whateveryouwant" src="img/portfolio/fullsize/1.jpg"></div>

Answer 2

You're trying to navigate through your nested structure using classes but that's not how it works. Because you only have one image inside your carouselSlider div you could simply access it using:
#carouselSlider img {<your css here>}
But this will probably break when you have more images in there. If you can change that HTML you should probably add a class to your img or an id to to one of those inner divs and access it directly.
To avoid the image getting stretched check out the "background-size" CSS property. Either 'cover' or 'contain' should do it for you.