CSS background image is not working

Question

I have a problem with a CSS background image that will not show, can anyone se why it will not show the image? i cant figure it out myself.

 <!-- Section: services -->
<section id="service" class="home-section text-center bg-gray">
 <div class="heading-about">
 <div class="container">
 <div class="row">
 <div class="col-lg-8 col-lg-offset-2">
 <div class="wow bounceInDown" data-wow-delay="0.4s">
 <div class="section-heading">
 <h2>SCHEMA!</h2>
 <i class="fa fa-2x fa-angle-down"></i>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<br>TEST<br>
 </div>
 </div>
 </div>
 </div> 
 </div>
</section>
<!-- /Section: services -->
.service {
width:100%;
position:relative;
background: url(../img/bg2.jpg) no-repeat top center;
}

• DaniP: .service must be #service since service is an ID not a classname
• Sleek Geek: Is the img a folder?

Answer 1

You want to use #service when referring to ID's of elements.

#service {
width:100%;
position:relative;
background: url(../img/bg2.jpg) no-repeat top center;
}

A good guide on css selectors can be found here.

• arkascha: There are better sources than w3schools of all things (also called "w3fools" for a purpose), but your answer is better than mine because of adding a link. Well done!
• user2010925: Curious, why the hatred for w3schools? It is simple, but I think it displays things in a nice manner and is good for absolute beginners.
• arkascha: Oh, that is no hatred! It is just that they are imprecise and outdated sometimes which can lead to great confusion. I would recommend MDN instead: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/… Well written, precise and cross browser.

Answer 2

You define the top level element as:

<section id="service" class="home-section text-center bg-gray">

So you give it the id "service", not the class.

Therefore your css should be:

#service {
 width:100%;
 position:relative;
 background: url(../img/bg2.jpg) no-repeat top center;
}

Note the leading # instead of the ..

Answer 3

In my opinion in your CSS you refer to class ".service{..." instead of a id of section element. So you have to use "#service{..." instead of ".service {..."