Question 66367 in Html Question posted in
Some basic documentation can be found here.

Does anyone know why background image isn't displaying? – Html

Hi I’m creating a website following a tutorial and got stuck (lol). I don’t know why the background image isn’t displaying. Tried to rename classes etc but nothing works. Could anyone give me a hint?

.site-main .subscribe-us-area .subscribe {
  background: url(/img/subscribe-bg.png) no-repeat;
  padding: 10rem 0;
  margin: 3rem auto;
}


<section class="subscribe-us-area">
  <div class="container subscribe">
      <div class="row">
          <div class="col-lg-12 text-center subscribe-title">
              <h4 class="text-uppercase">Get Update From anywhere</h4>
              <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam,
                  consequuntur.</p>
          </div>
      </div>
      <div class="d-sm-flex justify-content-center">
          <form class="w-50">
              <div class="row d-flex flex-row flex-wrap">
                  <div class="col input-textbox">
                      <input type="text" id="txtemail" class="form-control" placeholder="Email">
                  </div>
                  <div class="col">
                      <div class="btn-submit">
                          <button type="submit" class="btn btn-success float-right">Subscribe</button>
                      </div>
                  </div>
              </div>
          </form>
      </div>
  </div>
</section>

I want the image to be displayed in the background

Tags:

2

Answers


  1. 0

    try doing this:

    .site-main .subscribe-us-area .subscribe {
     background: url("./img/subscribe-bg.png") no-repeat;
}

    see this documentation from mozilla

    Login or Signup to reply.
  2. 0

    I was able to get the code supplied by @Tasye to work (adding the . in front of the url). I also had to add a the class= "site-main" to a div. This looks something like this:

      <style>
  .site-main .subscribe-us-area .subscribe {
   background: url(./img/subscribe-bg.png) no-repeat;
   padding: 10rem 0;
   margin: 3rem auto;
  }
  </style>
<body class="site-main">
  <section class="subscribe-us-area">
     <div class="container subscribe">
        <div class="row">
           <div class="col-lg-12 text-center subscribe-title">
             <h4 class="text-uppercase">Get Update From anywhere</h4>
             <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam,
              consequuntur.</p>
           </div>
        </div>
        <div class="d-sm-flex justify-content-center">
          <form class="w-50">
            <div class="row d-flex flex-row flex-wrap">
              <div class="col input-textbox">
                  <input type="text" id="txtemail" class="form-control" placeholder="Email">
              </div>
              <div class="col">
                  <div class="btn-submit">
                      <button type="submit" class="btn btn-success float-right">Subscribe</button>
                  </div>
              </div>
            </div>
          </form>
       </div>
    </div>
  </section>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search