CODEWITHSUNDEEP
css
lyx
lyx

Reputation: 63

setting both the background of html and body

I am looking at the following code :

body{
background: black;}

html{
background: green
}

https://codepen.io/anym1994/pen/VwbbBZZ. Supposedly, I should get an almost black screen with the margin being green. However that is not what is showing on codepen. Am I not correct about the expected behavior?

update: what is making this more confusing is, if I try the same code https://cssbattle.dev/play/1 here, my expected behavior does show up without putting any element in the body to expand its height.

Upvotes: 0

Views: 78

Answers (2)

I_love_vegetables
I_love_vegetables

Reputation: 1341

as @januw a commented, your body height might be 0

so you can add the height and width to be fullscreen like this :

body{
  background: black;
  height: 100%;
  width: 100%;
}

Upvotes: 0

Lakshan Costa
Lakshan Costa

Reputation: 643

Yes it will work how you mentioned. but you have to add the elements to the body for you to see the black screen and the margin to be green. I added some headings for you to get an understanding. This is the html code I got. You can add it in codepen.

<html>
  <head>
  </head>
  <body>
    <h1>Hi</h1>
    <h1>Hi</h1>
    <h1>Hi</h1>
    <h1>Hi</h1> <!-- Add more to get more black screen -->
    
  </body>
</html>

Or you can use something like this. You can set a specific area unlike the above one.

<!doctype html>
<html>      
  
  <head>
     <style>
        #footer {
           background: #00ff00;
           padding: 100px;
        }
     </style>
  </head>
    
  <body>
   <body style="background-color:black;">
     <div id="footer">
        <div class="footer-text">Text</div>
     </div>
  </body>   
 
</html>

Upvotes: 3

Related Questions