Set the background image using css

Question

I write this code to set the image for may background but i didn't get my background images what I do? Any Solution?

.instantqoute{
    background:url('images/services/Chrysanthemum.jpg');
    }

<br><br>
<div class="row instantqoute" >
    <div class="col-sm-12">
     </div>
</div>

Answer 1

All else being equal, and assuming your URLs are correct:

There is no content inside the div. There is no explicit height set on it. It therefore has a computed height of 0. This provides no area for the background to be painted on.

It needs a height. Give it one by putting some content in it or setting the height or min-height property.

Answer 2

please give height and width to .instantqoute. Background image not loading because div is blank.

Answer 3

Check your URL and add height and width to your div.

<style>
  .instantqoute {
     background:url('images/services/Chrysanthemum.jpg');
  }
</style>

<br><br>
<div class="row instantqoute" style="width:100px; height:100px;">
   <div class="col-sm-12"></div>
</div>

Hope it will help.

Answer 4

U need to have size of this div, for example

.instantqoute {
  background:url('images/services/Chrysanthemum.jpg');
  width: 100px;
  height: 100px;
}

<div class="row instantqoute" >
  <div class="col-sm-12">
  </div>
</div>

Most common mistake is bad link for example structure

-css/style.css
-js/script.js
-img/image.jpg
-index.html

Background is loading from css so if u give link like this "img/image.jpg" Style css try to find this image in location: "css/img/image.jpg" for left folder u need to type "../" for example: "../img/image.jpg"

My london sucks

Answer 5

Assuming given path is correct:

Your div instantqoute does not contain any content therefore your image is not shown.

Why?

Since you haven't given a width and a height to the (div/img) / no content.

Solution:

Give height and width to the div & add content (If required).

Next:

If height and width given and you still cannot see the background.

Then:

Assuming given path is incorrect:

• Is the image in the same directory as the file referencing it?
• Is the image in a directory below?
• Is the image in a directory above?

By "below" and "above", I mean subdirectories and parent directories. Relative file paths give us a way to travel in both directions. Take a look at my primitive example:

Here is all you need to know about relative file paths:

• Starting with "/" returns to the root directory and starts there
• Starting with "../" moves one directory backwards and starts there
• Starting with "../../" moves two directories backwards and starts there (and so on...)
• To move forward, just start with the first subdirectory and keep moving forward

Answer 6

You can use <img> to achive this check below Add height and width to your div also check if the url to the image is correct.

<br><br>


   <div class="row instantqoute" style="height:200px;width:200px;"><img src='images/services/Chrysanthemum.jpg' style="height:100%;width:100%; ">
         <div class="col-sm-12">
                  </div>

   </div>

Answer 7

You could do like this:

.instantqoute{
background: url(http://via.placeholder.com/2000x400); 
  height: 400px;
  width: 100%;
}

<div class="row instantqoute" >
    <div class="col-sm-12">
     </div>
 </div>