CSS: Background image larger than entire page - html

Question

EDIT: Not a duplicate of the linked question as I am stating that I attempted the accepted solutions in the other question and that they are not solving my problem
I'm trying to give a containing section a background image but the image is about 15% larger than the screen. I've attempted making the background-size 100%, cover, and contain but it is consistently larger than the page. I looked through the size of each element in the DOM and they're all the same size none are larger so I am stumped as to what is causing the larger background image. Here's my code:
html
<section className="Intro">
<img />
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<p>...</p>
</section>
css
.Intro {
background-image: url('../mobile-bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: white;
height: 100vh;
}

Answer 1

Your code was correct. But some browsers hasn't supported for some css rules. Then we have to use their css rules. Try with this one. It will work
.Intro {
background-image: url('../mobile-bg.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: white;
height: 100vh;
}