1

I am trying to style the background of a react app page. So, naturally, I style the main div that has all the components in it with the background property in CSS. This main div has a className named Wrapper in my app. However, when I do that, only part of the screen changes the background whereas I expect it to take the full screen. Here's the code and here's how it looks:

JSX:

render() {        
        return (

 <div className="wrapper" >

    <div>Inner content</div>

</div>

) }

CSS:

.wrapper {
    overflow: hidden;
    background: linear-gradient(#42275a, #734b6d);      
}

enter image description here

As you can see only the top part changes color, but the rest of the page is still white.

I have tried adding to the wrapper: "height: 100%;", "min-height: 100%" and/or "height: 100vh;", "min-height: 100vh" but nothing has worked.

I also tried to change the body property in CSS like so

body {
    background: linear-gradient(#42275a, #734b6d);  
  }

but what I get is an ugly line that seems to separate the wrapper from the body like this: enter image description here

My question is, why is the main div (wrapper) taking up only a small part of the screen when actually it is the main div which contains all that content that seems to go off into the white screen. Why doesn't it take up the entire screen?

Also, why is body separate from wrapper or vice versa?

And lastly, how do I change the background without any kind of separation like that line? Because what is even more weird is that the body seems to be fragmented as well. See this image where you can see the body of the document seems to be fragmented (notice the line that separates colors): enter image description here

Some more code as requested. I am not sure if this is useful but I guess this is all that is relevant.

This is the App.js file's code:

render() {

    if (this.state.loading) {

      return null;
    }
    else {

      return (

        <div className='app'>


          {this.state.user ?
            <LoggedIn /> :
            (<HomePage />)}


        </div >

      );
    }

}

.app {
  height: 100%
}

This is the Index.js's and Index.css's code:

ReactDOM.render(
  <Elements stripe={promise}>
    <BrowserRouter>
    
      <React.StrictMode>
         <ScrollToTop>
           <App />
        </ScrollToTop>                      
      </React.StrictMode>
      
    </BrowserRouter>
  </Elements>,
  document.getElementById('root')
);

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;      
    align-items: center;  
}

Here's a screenshot of the Elements section from the Developer tools: enter image description here

I guess I have included everything that is higher up in the DOM, I suppose. Please let me know if anything specific can be of any use. Thanks.

I have removed all the CSS properties from wrapper as suggested by Dan Zuzevich in the comments. It did remove the wrapper and the screen is, indeed, filled with the gradient as set in body's CSS. However, the screen is still divided by lines or fragmented if you will. Any idea why? I want one whole body with the gradient color. Here are some screenshots: enter image description here

enter image description here

DonBergen
  • 127
  • 1
  • 9
  • can you provide some more code so we can more details of why thats happening? – Dev Sep 07 '21 at 19:25
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) – Paulie_D Sep 07 '21 at 19:28
  • The second two images look suspiciously like you have two separate elements both using the gradient. Impossible to tell what's causing your wrapper to not fill the screen without seeing the HTML (in isolation, `height: 100vh` definitely works, you must have other code interfering) – Daniel Beck Sep 07 '21 at 20:07
  • Why are you setting overflow: hidden? – Dan Zuzevich Sep 07 '21 at 20:30
  • If you remove the background color styling from the wrapper, remove overflow: hidden, and leave the background color styling on the body tag, I have no idea why that wouldn't work. – Dan Zuzevich Sep 07 '21 at 20:32
  • I have included some more code that is higher up in the DOM. I suppose that is all that's relevant, right? Please let me know if there is anything more specific that you need. I also included a screenshot of the Elements section from the Developers tool. I will look into a stack snippet. I have not done that before. I do not know what 2 separate elements could use the gradient. Body is strangely divided into sections for some reason and wrapper takes up only part of the screen. Honestly, I do not remember why I am setting overflow to hidden. There used to be a legitimate need for that before. – DonBergen Sep 08 '21 at 01:20
  • Hey Dan, thanks for your comment. I have removed all the CSS properties from wrapper . It did remove the wrapper and the screen is, indeed, filled with the gradient as set in body tag's CSS. However, the screen is still divided by lines or fragmented if you will. Any idea why? I want one whole body with the gradient color. Please see newly uploaded photos above. – DonBergen Sep 08 '21 at 01:31

1 Answers1

0

Since no one seems to have been able to help me get rid of the lines, I kept doing my own research and found my answer here - CSS3 gradient background set on body doesn't stretch but instead repeats?.

Basically, here's what helped get rid of the lines:

body {

    background-image: linear-gradient(to bottom, #42275a, #734b6d);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
     }

Hopefully, this will be helpful to someone in the future.

Happy coding.

Don.

DonBergen
  • 127
  • 1
  • 9