Bootstrap - Background image not working

Question

My CSS markup:

.rowbgi {
    background-image:url('img/gradient.png');
    background-color:#cccccc;
}

My HTML markup:

    <div class="span4 rowbgi">
      <img class="img-circle" data-src="holder.js/140x140">
      <h2>Heading</h2>
      <p>Stack Overflow</p>
      <p><a class="btn" href="#">View details </a></p>
    </div><!-- /.span4 -->

I am not able to see the background image, but the color is seen in the background. The image is available in the path.

Can somebody tell me some silly mistake I am doing?

Answer 1

Nobody knows what you are doing, because you did not show it (eg. with jsfiddle ;P), but my first guess is that you have following file structure:

• HTML file in root directory: /index.html,
• CSS file in css directory: /css/style.css,
• images in /img/gradient.png.

Now, mind that all the files linked from HTML/CSS have paths relative to them. So, if you keep CSS in /css, then the path in CSS img/xxx links to /css/img/xxx. If I am guessing correctly and this is your case change the style to:

background-image:url(/img/gradient.png);

or

background-image:url(../img/gradient.png);