Added page background color, header color disappears
Question
I have a header div where I would like to show one color. When I added color to the entire background, the header color does not show anymore.
Here is the HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="shortcut icon" href="images/logo.png">
</head>
<body>
<div class='grid'>
<div class='header'>
<div class='col4head'>
<a><img src="images/logoname.png"></a>
</div>
<div class='col8head'>
<p>name<br/>title</p>
</div>
</div>
<hr/>
Here is the CSS:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: #e9ece5;
}
.grid {
column-count: 12;
}
.header {
width: 100%;
max-height: 70px;
display: flex;
overflow: auto;
background-color: #c0dfd9;
.header a img {
max-height: 70px;
position: fixed;
}
1 answers
solution1
4 ACCPTED 2015-11-10 20:56:33
Two things:
You're missing a closing curly brace at the .header of your CSS.
With the * selector you are targeting every element on your page, I would advise you to put the background color on your body element eg:
body { background-color: red; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Background color of the main content on the html page disappears
background color disappears on click
Background color disappears
Background-color disappears (intermittently) in Chrome on my contact page
css background color disappears with doctype
background color disappears when scrolling
Background color of button disappears after hovering over
My body background color disappears when scrolling
Unordered List background color disappears in media query
CSS/HTML Header Background Color Not Covering Entire Width of Page
Related Tags