How to make background color to whole screen? [Random-Quote-Machine]

I am having trouble to make background color to whole screen.
Here the project link on codepen.
How can I make color to whole screen.
When I give color to body it’s applying on whole screen, not on .wrapper. But how can i apply style={{backgroundColor: color}} inside return() on body ?

Okay, I get it now. I removed class="container" from my html <div>. Then, made some change on my js file.

    <div style={{backgroundColor: color}} >
      <div class="container pt-5">

So, I should make another <div> outside of container div (<div class="container pt-5">). Then apply style={{backgroundColor: color}} to new <div> and it will work on whole body.

there is a simpler solution. You can target your document body and apply styles to it. The body usually covers the whole screen.

body {
  background-color: blue;

Ya, But here it was not always blue, It should continuously changing on every click on Get Quote button based on the colors array inside js file.

you can style your body in the JS code too.
here is a solution i found on google:

You can use vanilla JS, to update its CSS style, or add a class, which can contain that style

1 Like

Thank you @Sylvant, it’s helpful :heart:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.