Background Image not showing in CSS
Question
I am developing a basic website using HTML and CSS and my background image will not show up in the section? Any help? Here is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Desc">
<meta name="author" content="Lewis Beard">
<META NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
<title>Lewis Beard Lighting Design</title>
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body id="page-top">
<section id="title">
<div class="container" >
<p><center>LEWIS BEARD LIGHTING DESIGN</center></p>
</div>
</section>
<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>
<section id="nav">
<div class="container">
<p><a class="page-scroll" href="#about">About</a> - <a class="page-scroll" href="#portfolio">Projects</a> - <a class="page-scroll" href="#design">Design</a> - <a class="page-scroll" href="#contact">Contact</a></p>
</div>
</section>
<section id="about">
<div class="container" style="text-align:center;">
<h4>Design Differently</h4>
<hr>
<p></p>
</div>
</section>
<section id="portfolio">
<div class="container" style="text-align:center;">
<h4>Projects</h4>
<hr style="width:10%">
<p></p>
</div>
</section>
<section id="design">
<div class="container" style="text-align:center;">
<h4>Design Differently</h4>
<hr>
<table style="text-align:center;width:60%;margin-left:20%;">
<tr><td><i class="fa fa-4x fa-arrows"></i></td><td><i class="fa fa-4x fa-lightbulb-o"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td><td><i class="fa fa-4x fa-paper-plane"></i></td></tr>
</table>
</div>
</section>
<section id="contact">
<div class="container" style="text-align:center;">
<p>Contact Lewis!</p>
</div>
</section>
<section id="footer">
<div class="container" >
<div style="text-align:left">
<p><br>Links Here</p>
</div>
<div style="text-align:right;">
<p>COPYRIGHT LEWIS BEARD LIGHTING DESIGN 2016<br>ALL RIGHTS RESERVED</p>
</div>
</div>
</section>
<section id="designby">
<div class="container" >
<p><center>Designed By Code After Code</center></p>
</div>
</section>
</body>
</head>
This is my CSS file:
html,
body{
height:100%;
}
body{
font-family:Merriweather,'Helvetica Neue',Arial,sans-serif;
}
#title {
height: 40px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #fff;
}
header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
#nav {
height: 40px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #808000;
}
#about {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #2d5f74;
border-bottom:0px #fff solid;
}
#portfolio {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #2d5f74;
background: #E7E5DF;
border-bottom:100px #fff solid;
}
avo {
height: 400px;
background: url(avo.jpg) no-repeat center fixed;
background-size: cover;
}
#design {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #E7E5DF;
}
#gallery {
height: 400px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #808000;
}
#contact {
height: 200px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #D3D0CB;
}
#social {
height: 100px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
background: #fff;
}
#footer {
height: 150px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #393E41;
}
#designby {
height: 50px;
width: 100%;
margin: 0 auto;
position: relative;
padding: 0px;
border: 0;
float: left;
color: #fff;
background: #808000;
}
The image is in the same folder as the rest of the code and is a standard image - there are no console errors in the logs and therefore i am unable to find out what it is! Any help would be appreciated! Thanks in advance!
2 answers
solution1
2 ACCPTED 2016-01-09 14:48:37
Try this fiddle .
css:
#header {
height: 500px;
background: url(http://p1.pichost.me/i/54/1774604.jpg) no-repeat center fixed;
background-size: cover;
}
solution2
1 2016-01-09 14:47:09
To target this:
<div id="header" style="filter: url(/files/theme/grayscale.svg#grayscale);"></div>
You need a # before:
header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
giving
#header {
height: 500px;
background: url(blue.png) no-repeat center fixed;
background-size: cover;
}
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 css image not showing
CSS - background image not showing
Background image not showing with CSS
CSS background image not showing?
Background image is not showing in css
CSS: background image not showing
Background image not showing in CSS and HTML
CSS Background Image is not showing up
My CSS background image is not showing
CSS: Background-image not showing
Related Tags