Html, Css Background Not Showing
Question
This is probably a really stupid question, but my background for my nav div wont show, I really don't know the problem to this, the css file is linked and working with some elements.
Image Properties Size: 10kb -Bit Depth: 32 -Dimensions: W:300 H:190 -File Type: png -Name: Nav_Background
What it needs to do http://prntscr.com/l89oq0
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Portfolio Template</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="shortcut icon" href="favicon.ico" type="">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="nav">
</div>
</div>
</body>
</html>
main.css
/*----------Global----------*/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.clearfix::after{
content: "";
clear: both;
display: table;
}
html{
font-family: circular std, sans-serif;
font-weight: 100;
}
body{
width: 100%;
margin: auto;
background: white; /*Replace with background image
background-position: top;
background-size: cover;
background-repeat: no-repeat;*/
}
/*----------Navigation----------*/
.nav {
background-image: url(images/Nav_Background.png);
background-position: right top;
background-size: 300px 191px;
margin-top: 5px;
}
1 answers
solution1
0 ACCPTED
<div class="nav"> (and if you are using a class named nav you should really be asking yourself if you should be using a <nav> element instead) has no content or anything else that would give it a height.
With no height, there are no pixels to paint the background on.
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.