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.

try a full path for background url – Baransel A. Feb 22 '19 at 07:27 — Baransel A., Feb 22 '19 at 07:27
Yeah the tilde (`~`) won't work client-side. – ne1410s Feb 22 '19 at 07:49 — ne1410s, Feb 22 '19 at 07:49

score 1 · Accepted Answer · answered Feb 22 '19 at 08:24

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

score 0 · Answer 2 · answered Feb 22 '19 at 07:30

0

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>

answered Feb 22 '19 at 07:30

Hamza Khan

107
1
11

Rigel1121 · Answer 3 · 2019-02-22T07:42:42.733

0

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>

edited Feb 22 '19 at 07:42

answered Feb 22 '19 at 07:33

Rigel1121

2,022
1
17
24

score 0 · Answer 4 · edited Feb 22 '19 at 09:33

0

Try this

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

Use background-image instead of background.

edited Feb 22 '19 at 09:33

mechnicov

12,025
4
33
56

answered Feb 22 '19 at 07:46

Jz Lim

1
2

score 0 · Answer 5 · answered Feb 22 '19 at 07:48

0

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...?)

answered Feb 22 '19 at 07:48

José Antonio Postigo

2,674
24
17

Background image is not showing in the div

5 Answers5