CODEWITHSUNDEEP
htmlcss
vinay kapoor
vinay kapoor

Reputation: 83

Set the background image using css

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>

Upvotes: 0

Views: 169

Answers (7)

RasmusGlenvig
RasmusGlenvig

Reputation: 765

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>

Upvotes: -1

Hash
Hash

Reputation: 8050

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: enter image description here

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

Upvotes: 0

ROCKY
ROCKY

Reputation: 11

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

Upvotes: 0

AutoTester213
AutoTester213

Reputation: 2871

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>

Upvotes: -1

Suraj
Suraj

Reputation: 3137

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.

Upvotes: 0

Quentin
Quentin

Reputation: 944320

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.

Upvotes: 2

ankita patel
ankita patel

Reputation: 4251

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

Upvotes: 1

Related Questions