Why isn't my CSS background image showing on my page
Question
Need some help getting my background image to display on my page. I'm having trouble getting it to work and I can't figure out why because to me it seems like I spelled everything correctly. Any help would be appreciated.
HTML
'<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<div class="pageOne">
</div>
<body>
<ul class = "nav nav-pills">
<li>
<a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
<a href="#">Contact Me</a>
</li>
<li class="pull-right">
<a href="#">Portfolio</a>
</li>
<li class="pull-right">
<a href="#">About Me</a>
</li>
</ul>
</body>
</html>'
CSS
'body{
background-color: white;
}
.nav-pills{
font-family:Orbitron;
font-size: 1.7em;
background-color: black;
};
.pageOne{
background: url("../images/mountains.jpg");
};'
3 answers
solution1
0 2017-07-24 18:18:05
Your <div> is empty, which means that it is 0px tall (there needs to be some content to force it to "expand"). Try setting the height explicitly in your CSS.
.pageOne {
height: 100px; /* or whatever height you want */
background: url("../images/mountains.jpg");
};'
solution2
0 2017-07-24 18:18:32
.pageOne is an empty div. Your current content is in your <body> tags. If you put the background on your body instead, it would appear. A div shouldn't be outside the body tag anyways. If you leave your div outside of the body, it could render faulty.
solution3
0 2017-07-24 18:22:40
Checkout this example
You made several mistakes in your html and css
pageOne is empty put some content in it or you can give height of that div from css
don't add
;semicolon like this.pageOne{};remain part of css will not execute
Hope this will helps you
body{ background-color: white; } .nav-pills{ font-family:Orbitron; font-size: 1.7em; background-color: black; } .pageOne{ background: url("http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1-600x319.gif"); background-repeat: none; background-size: cover; display: inline-block; height: 100px; width: 100%; text-align: center; }
<html> <head> <title>Daniel's Portfolio | Welcome</title> <link rel="stylesheet" href="CSS/bootstrap.min.css"> <link rel="stylesheet" href="CSS/style.css"> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> </head> <div class="pageOne"> hi </div> <body> <ul class = "nav nav-pills"> <li> <a href="#">Daniel Collins</a> </li> <li class="pull-right"> <a href="#">Contact Me</a> </li> <li class="pull-right"> <a href="#">Portfolio</a> </li> <li class="pull-right"> <a href="#">About Me</a> </li> </ul> </body> </html>
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.