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?

Resonant

what does your web inspector indicate? – Roche

What did you do at last? – Formation

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

Passably

Answer 2

I also tried using the image path format, but the image wasn't showing up at all.

But when I uploaded the image to my server, and I'm assuming this would work with any image hosting platform, like Imgur, and used the full path, it worked.

So, instead of using:

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

Do:

background-image: url('https://example.com/img/gradient.png');

Hopefully, this helps someone!

Cariecaries

Answer 3

To use CSS to load the image, you will have to save the image file inside your CSS folder (if using an external style sheet). If you use the url image.jpg for example, CSS is looking for that file inside the CSS folder. Your CSS markup is telling CSS that there is a sub-folder called img inside your CSS folder, which probably isn't the case.

Candra

Answer 4

convert your png to file to jpg and Paste the same line after opening the body tag in the html code

Issie

Thanks for your efforts, Can you share proper detail. – Copacetic

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Calcimine

Answer 5

background: url("../images/name of image") fixed center;

Epidemic

Answer 6

Updated:

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

Try removing the quotes, it worked for me

Langmuir