Background image will not fit in the whole page in App.css in create-react-app

Question

I'm not sure why but any image I choose for the page's background is never 100% entirely shown. I'm not sure if create-react-app has something to do with it or what but there is always some part of the image that is overflowing and gets cut from the page.

body{
    background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
    background-size: 100%;
    background-position: center;
    height: 100vh;
}

I need the image to be shown in its entirety. background-size: 100% doesn't seem to do it inside create-react-app for some reason.

Have you tried background-size: contain ? – asimovwasright Aug 08 '19 at 08:22 — asimovwasright, Aug 08 '19 at 08:22

asimovwasright · Accepted Answer · 2019-08-08T08:36:10.613

4

Basically, background-size: 100% will fill the screen with the image, and crop it if necessary.

I think what you want is to see the whole image. You should use contain for that:

    html {
     width: 100%;
     height: 100%;
     background: red url('http://media.gettyimages.com/photos/groningen-city-view- picture-id588880579?s=612x612') no-repeat center;
     background-size:contain;
    }

jsfiddle

edited Aug 08 '19 at 08:36

answered Aug 08 '19 at 08:29

asimovwasright

838
1
11
28

Okay thanks, this worked! The image is now fully contained in the page but it is not fully covering the page and I can see why. My only question now is what kind of image would work to cover the whole page AND be 100% shown on the page? Does it depend on the dimensions?? – albert_anthony6 Aug 08 '19 at 09:08
It's impossible to know the dimensions of the end-users' screen. Your best bet is to have a background color which is more forgiving behind the image. (Change red to black for example in my snippet) – asimovwasright Aug 08 '19 at 09:15

Amad · Answer 2 · 2019-08-08T09:11:48.637

1

Try this:



body {
    background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

edited Aug 08 '19 at 09:11

answered Aug 08 '19 at 08:24

Amad

45
7

`width: 100%` gives horizontal scroll to the page. – ravibagul91 Aug 08 '19 at 08:52
Not with overflow hidden. – Amad Aug 08 '19 at 08:57
Why to complicate things, without width it will work. – ravibagul91 Aug 08 '19 at 09:02
Do you mean, "Why would you complicate things?". This is a hack for early browsers. This method's coverage is wider. – Amad Aug 08 '19 at 09:07

score 1 · Answer 3 · answered Aug 08 '19 at 08:41

This can be done purly with CSS, look for some basic CSS background properties

body{
    background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
    background-size: cover;             //contains these values - auto|length|cover|contain|initial|inherit;
    background-position: center;
    background-repeat: no-repeat;       //contains these values - repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
    height: 100vh;
    background-attachment: fixed;       //contains these values - scroll|fixed|local|initial|inherit; 
}

Note: Look for background-attachment property, if you don't need it you can remove it.

score 0 · Answer 4 · answered May 25 '23 at 03:20

0

I got mine to work with this:

.background-image {
  background-image: url('XXX');
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: scroll;
}

Background image will not fit in the whole page in App.css in create-react-app

4 Answers4