Two Juncos Two Juncos - 2 months ago 6
CSS Question

CSS background-image is not working for a section element

I am trying to follow along with a Lynda.com tutorial for AngularJS by building the web page in the video.

I cannot get a background image to appear on a web page for a section element.
The background color works for the section.

Here is the HTML:

<div id="myCalculator">

<main>
<section class="inc">
<div>
<h4>Incadescent</h4>
<p>100.0</p>
<p>13.14</p>
</div>
</section>


Here is the CSS:

#myCalculator main section {
width: 25%;
float: left;
text-align: center;
padding-top: 110px;
color: #fff; */
background-repeat: no-repeat;
background-position: center, 5px; /* X and Y */
background-size: 63px, 100px;
}

#myCalculator main::after { /* This is a pseudo element. The spacing and lack of spaces here are important. */
content:''; /* This creates empty string content so the clear floats will take effect. */
display: block;
clear: both;
}

#myCalculator main section.inc {
background-color: #ba2d2d;
background-image: url(images/bulb_inc.png);
}


I know the path to the image is correct because the image appears when I use the path in an image element:

<img src="images/bulb_inc.png" height="257px" width="200px" />

Answer

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

#myCalculator main section {
  width: 25%;
  float: left;
  text-align: center;
  padding-top: 110px;
  color: #fff;
  */ background-repeat: no-repeat;
  background-position: center, 5px;
  /* X and Y */
  background-size: 63px, 100px;
}
#myCalculator main::after {
  /* This is a pseudo element. The spacing and lack of spaces here are important. */
  content: '';
  /* This creates empty string content so the clear floats will take effect. */
  display: block;
  clear: both;
}
#myCalculator main section.inc {
  background-color: #ba2d2d;
  background-image: url(https://placeholdit.imgix.net/~text?txtsize=18&txt=195%C3%97238&w=195&h=238);
  background-size: cover;
}
<div id="myCalculator">

  <main>
    <section class="inc">
      <div>
        <h4>Incadescent</h4>
        <p>100.0</p>
        <p>13.14</p>
      </div>
    </section>
  </main>

</div>