Background image is not showing in the div

Question

 .jumbotron { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } 

 <div class="jumbotron" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> 

My image url is correct but i do't now why it is not working. if any one know please help me. Thanks.

Answer 1

Check your background image path, I've replaced the image path by another and it works.

Maybe replace the ' ~ ' by a relative path like ' ../ '

<div class="jumbotron" style="background: url('https://picsum.photos/200/300') no-repeat; background-size:cover">
</div>

See this fiddle

Answer 2

Try the following code, changed background to background-image ,

<div class="jumbotron" style="background-image: url('~/images/hdpic.jpg') no-repeat; 
background-size:cover">
</div>

Answer 3

Refer to this one . Try using background-image . See below:

 .jumbotron { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } 

 <div class="jumbotron" style="background-image: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> 

Answer 4

Try this

<div class="jumbotron" style="background-image: url('~/images/hdpic.jpg') no-repeat; background-size:cover">
</div>

Use background-image instead of background .

Answer 5

The background css logic seems to be fine. Then you should check that the div is being shown has the proper size with the browser's inspector (has it got width...?)