How do I make the background image on my react app responsive?-CodePudding

There is a black space where the IOS status bar is. I cannot figure out how to get that space to fill up using CSS.


body{
  font-family: 'Inconsolata', monospace;
  background: url("./Components/Images/back.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
} ```


  [1]: https://i.stack.imgur.com/y3Lwp.jpg

CodePudding user response：

https://www.youtube.com/watch?v=plOl7TNc89A

I'm not sure what your exact issue is since you didn't provide a working example (please update if this doesn't solve it), but it sounds a lot like the issue desribed in the video above. tl;dr is that images are inline elements by default and they put a default buffer below them to allow them to line up with the main parts of a line of text and not the parts of text that drop below the line on which text is written. To fix this, you can override the default display and use

display: block

for your individual img element to remove space below the image.

Some other problems could be the presence of margin or padding on your element (set those to 0, if needed) or the way the image is saved. Re-save the image from your image software using save as an not as save for web.

CodePudding user response：

also, I'm not sure what your exact issue is but if it is concerned with the default spaces in css please add

*
{
box-sizing:border-box;
padding:0;
margin:0;
}

to reset default properties I hope this helps