Trouble with CSS Background Color

HTML & CSS
1

I have created an index.html page which references an external CSS stylesheet. Everything in the stylesheet reflects on the index.html page EXCEPT the background color. And I just don’t know what I’m doing wrong!

Screen Shot 2020-06-21 at 9.58.12 PM
Screen Shot 2020-06-21 at 9.58.12 PM1440×900 96.5 KB

Please help a frustrated n00b.

1 Like
2

Hi there christibob70,

and a warm welcome to the forums. :winky:

For members here to have any possible chance
of resolving your problem they would need a link
to the problematic page and or the relevant HTML
and CSS that will display the problem.

coothead

3

Dang. I don’t have access to hosting atm. I did post an image of the stylesheet though…and its effects in the split screen in Dreamweaver

4

…or the relevant HTML
and CSS that will display the problem. ::biggrin:

coothead

5

Screen Shot 2020-06-21 at 9.58.01 PM
Screen Shot 2020-06-21 at 9.58.01 PM1440×900 96.7 KB

Have at it! :slight_smile:

6

Hi, welcome to sitepoint!

Looking at your css I see min-height:100%; on the body.

The body is a child of the html element, which does not have it’s height set yet so the body has nothing to base a percentage height from.

Try adding this to your stylesheet.

html {height:100%}

7

…but most definitely never an image of it. :unhappy:

coothead

8

You. Are a star! Thanks so much, that fixed it.

Regards,
christibob

9

While that is true Ray the body background color will normally propagate to the html element and will cover the viewport by default. The min-height:100% on body is irrelevant unless the html element has also been given a background-color and in that case the body element’s background-color reverts to content height only and only then would you need the height:100% on the html element.

I just wanted to make it clear that if you avoid using the html element for styling purposes you can simply add a background color to the body element and it will cover the viewport by default. No need for heights or min-heights :slight_smile:

2 Likes
10

Hi Paul, I looks like the min-height:100% on the body gets ignored by the browser when there is no height on the parent to reference from. In which case it defaults back to the normal propagation that you mentioned.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
body {
  min-height:100%;
  margin:10px;
  background-color:darkred;
}
p {
  color:darkred;
  background-color:lightblue;
}
</style>
</head>

<body>
  <p>Random text</p>
</body>

</html>

Based on the CSS in the OP’s screenshot in post #1 there doesn’t seem to be any styles on the html element. However that may have changed in the linked CSS file shown in the second screenshot, stylesheet.css

This was either a problem with Dreamweaver’s preview mode, after all it’s not a browser. Or there was unknown html styles in the stylesheet.css

I just assumed they were after a sticky footer layout by using min-height:100% on the body to begin with. In which case (as you know) the html height:100% is the missing piece of the puzzle.

@christibob70 , always test your pages in a real browser. Do not rely on Dreamweaver’s preview mode. As coothead mentioned, always post your actual css and html code rather than screenshots. The code I posted above confirms that the code in your screenshots was working in real browsers.

2 Likes
11

Thank you all. Lots learned!

1 Like
12

IIRC, Dreamweavers preview mode is based on an archaic opera-based engine (and it was old back in 2010). Unless it has been updated recently, I wouldn’t even glance at Dreamweavers preview mode.

1 Like
13

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