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

user_13741986 0
Viewed 65

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"

bootstrap-4 twitter-bootstrap css html
3 Answers

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.

user_137950940

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.

user_117477740

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>

user_133398370
Related