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

generallywrong 0
Viewed 34

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.

Here [1] is a screenshot of how it looks on an iPhone when the webpage is loaded.

The status bar space does not inherit/match the background image or the background color.

This is the code down below that I have for the background image.


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
reactjs css
2 Answers

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.

CodeoftheWarrior0

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

Solomon Sitotaw0
Related