CSS: Background image larger than entire page

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;
}

Possible duplicate of [Set size on background image with CSS?](https://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css) — RLessard, Nov 16 '17 at 00:50
No I'm using ReactJS not React Native, and I'm testing on Google Chrome — Will Scott, Nov 16 '17 at 00:51
@RLessard Not a duplicate as I stated I have already tried the solutions given in the linked question — Will Scott, Nov 16 '17 at 00:55
You should add a jsfiddle of codepen to we can help you better — Joel Banks, Nov 16 '17 at 00:58

score 3 · Accepted Answer · answered Nov 16 '17 at 01:20

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;
}

CSS: Background image larger than entire page

1 Answers1