Hey there, I'm currently learning web development and running into a bit of trouble with creating responsive images. Can anyone give me some guidance on what changes I should make in the code below?
Here's the HTML code:
<div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">
And here's the CSS:
#hero {
width: 100%;
height: 100vh;
background-color: rgba(39, 37, 34, 0.8);
overflow: hidden;
padding: 0;
}
#hero .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero .carousel-item::before {
content: "";
background-color: rgba(12, 11, 10, 0.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#hero .carousel-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}