Why isn't the background image appearing inside my <div>? - html

Question

I'm trying to put a background image just for this part of my web page, I put my image as an id (fruit) but it isn't appearing. Here is my code:
<div class="p-1 text-center bg-light" id="fruit">
<div class="col-md-6 mx-auto my-5">
<h1 class="display-4 font-weight-normal">TrendyEats</h1>
<p class="lead font-weight-normal">The Latest Food Trends</p>
<a class="btn btn-outline-secondary" href="#">Login</a>
<p class="small pt-4">blablabla </p>
</div>
</div>
and the css for the fruit id is:
#fruit {
background-image: url('/Pictures/fruits.jpg');
alt:"woops";
}
The "alt" also doesn't appear.
Any help is appreciated, thanks!
Edit: Fixed, it appears I had to write "Pictures/fruits.jpg" instead of "/Pictures/fruits.jpg"

Answer 1

You may want to check that your relative link is correct. If I replace that with an external link the background shows up just fine.
You want to add the alt within an img tag in HTML- in your case you don't have this. If you are adding a background image via CSS, you may want to add a solid color as an alternative to display as a backup if your link were to fail.

Answer 2

try to add
#friut {
background-image: url("./Pictures/fruits.jpg");
background-color: #000;
}
also check whether you have correctly linked the css file to the html page.

Answer 3

Please check image url it's working, [I am replaced it with content after #fruit] You can not place alt inside css you need to add on html image because it's html attribute, where you can add or set it with JavaScript.
#fruit {
background-image: url('https://www.w3schools.com/w3css/img_lights.jpg');
}
#fruit:after {
content: " (woops)";
}
<div class="p-1 text-center bg-light" id="fruit">
<div class="col-md-6 mx-auto my-5">
<h1 class="display-4 font-weight-normal">TrendyEats</h1>
<p class="lead font-weight-normal">The Latest Food Trends</p>
<a class="btn btn-outline-secondary" href="#">Login</a>
<p class="small pt-4">blablabla </p>
</div>
</div>