Background image of div wont show up

Question

I have a div that I would like to fill with an image. It won't show up though.

Here is html:

<div id=services> 
    <p1>Services</p1>
    <div id="test"></div>
</div>

Here is CSS:

#test {
 background-image: url(pics/chart.png);
 background-repeat: no-repeat;
 background-size:100%;
 height:200px; 
 width:200px;
 margin:auto;
 position:absolute;
}

This is the full code:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>

  html { 
    font-family: "Open Sans";
    font-size: 24px;
    font-style: light;
    font-variant: normal;
    font-weight: 500;
    line-height: 26.4px;
}

body { 
 background:  linear-gradient(#fff 30%, #CCFFFF );
 margin-top:10px ;
 margin-right:75px;
 margin-left:75px;
}
#container { 
 width:1300px; 
 margin:0 auto; 
 background:#iff; 
}

#header { 
 width:100%; 
 height:170px; 
 background:#Fff;
 }

#logo { 
 float:left; 
 width:400px; 
 height:40px; 
 margin:30px; 
 background:#Fff;
 color: #000;
 font-size: 40px;
 line-height:38px; 
}
span1 { font-size: 30px;
        line-height: 18px;


}
#navbar { 
 height:40px; 
 clear:both; 
 background: #Fff;
}
#navbar ul { 
 margin:10px; 
 padding:1px; 
 list-style-type:none;
 line-height: 40px; 
}
#navbar ul li { 
 padding:px; 
 float:right ; 
 margin-top:20px;
}
#navbar ul li a { 
 font-size:24px; 
 float:right ; 
 float:right ;
 padding:0 0 0 20px; 
 display:block;
 text-decoration:none;
 font-weight:100;
 color:#000;
}

#services {
  height:450px;
 background:#f9fbfb;
 text-align:center;
 font-weight:100;
 font-size:35px;
 padding:50px;
}

p {
 font-size:25px;
 font-weight: 200;
 margin-right:75px;
 margin-left:90px;
 line-height:40px;
 margin-top:50px;
}
#test {
 background-image: url(pics/chart.png);
 background-repeat: no-repeat;
 background-size:100%;
 height:200px; 
 width:200px;
 margin:auto;
 position:absolute;
}

h4 {
 text-align:center;
 margin: 60px;
 font-weight:;
 float:center;
}

#end {
 height:200px;
}

  </style>
</head>
<body>
<!-- container -->
 <div id="container">
 <!--  header -->
 <div id="header">
  <div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
  <div id="navbar">
   <ul>
    <li><a href="">contact </a></li>
    <li><a href="#">gallery &nbsp;|</a></li>
    <li><a href="#">fees & insurance &nbsp;|</a></li>
   <li><a href="#">hours & location&nbsp; |</a></li>
    <li><a href="pages/services.html">services &nbsp;|</a></li>
    <li><a href="#">about &nbsp; |</a></li>
   </ul>
   </div>
  </div>
  <!-- content area -->
  <div id="content_area">
 <div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
</div>
 <div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today 
1-805-563-0167 
</p>
</h4>
</div>
 </div><!-- end container -->
</body>
</html>

your code looks fine, check your image source – alen Jul 29 '17 at 20:29 — alen, Jul 29 '17 at 20:29

score 1 · Answer 1 · answered Jul 29 '17 at 21:08

There are a couple of ways to solve this issue.

You can specify both horizontal and vertical values for background size: property in your css. Try playing around with those values.

You can also try property values like auto and length.

Here's some code. Here I have set the width to auto and height to 100% so that the aspect ratio is maintained and the background scales automatically with the size of the div. Check it out.

#test {
 background-image: url(https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg);
 background-repeat: no-repeat;
 background-size: auto 100%;
 height:200px; 
 width:200px;
 background-color: red;
}

<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>

score 0 · Answer 2 · 2017-07-29T20:32:39.010

0

In your css file the url image must be enclosed in double quotes. Like this:

#test {
  background-image: url("pics/chart.png"); /* <-- */
  background-repeat: no-repeat;
  background-size:100%;
  height:200px; 
  width:200px;
  margin:auto;
  position:absolute;
}

edited Jul 29 '17 at 20:32

answered Jul 29 '17 at 20:24

1

thats false dude! – alen Jul 29 '17 at 20:25
2

I would advice you all to ignore that w3schools.com thing and use more trustful sources like [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) or [w3.org](https://www.w3.org/TR/CSS21/syndata.html#uri) itself. Quotes type doesn't matter. – kamyl Jul 29 '17 at 20:31
1

No quotes are optional: https://stackoverflow.com/questions/2168855/is-quotinget-the-value-of-url-really-necessary – btzr Jul 29 '17 at 20:37
Yes btzr, sorry, I was wrong. Thanks for commit it. – Jul 29 '17 at 20:40
@Natalie does forgetting double quotes in
also is optional?
– 0xDEADBEEF Jul 30 '17 at 10:34
@abcOfJavaeAndCPP yes they are: [wc3](https://html.spec.whatwg.org/multipage/syntax.html#unquoted) – btzr Jul 30 '17 at 23:05
this is a valid syntax: `
` ^^
– btzr Jul 30 '17 at 23:08

Background image of div wont show up

2 Answers2