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;
}

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 .

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 {..."