I've encountered an issue with my responsive design. While all elements adjust properly when resizing the height and width of the browser, the background image only changes when I resize the height. When I resize the width, it remains the same.
Original image: https://i.sstatic.net/JKPRn.jpg
Width resized image: https://i.sstatic.net/DTeh5.jpg
Thank you for any assistance provided.
HTML:
<div class="wrap-hero-content">
<div class="hero-content">
<span class="typed"></span>
</div>
</div>
<div class="mouse-icon margin-20">
<div class="scroll"></div>
</div>
CSS: #home {
background: url('../images/testimonial-bg.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 100%;
min-height: 100%;
height: 100%;
width: 100%;
display: block;
.wrap-hero-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.hero-content{
position: absolute;
text-align: center;
min-width: 110px;
left: 50%;
top: 58%;
padding: 65px;
outline-offset: 8px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}