Why isn't the background image appearing inside my
?

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"

Nice question - points for format. - `alt` will only apply to images. It's an attribute. `https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img` — Pogrindis, Jul 05 '20 at 01:42
`The "alt" also doesn't appear.` Yeah it wont, maybe describe what you're looking to do.. Some kind of `:hover` ? From the looks of it you want to put the `alt` into the HTML side of things. — Pogrindis, Jul 05 '20 at 01:43
https://stackoverflow.com/questions/38380115/is-there-an-equivalent-to-the-alt-attribute-for-div-elements/38380376 — Pogrindis, Jul 05 '20 at 01:46
if you try background-color: pink; instead of background-image... does that work? ie. do you get a pink background? — user3425506, Jul 05 '20 at 01:49
@Pogrindis I see, thanks, I think I confused the picture syntax of html with css. The alt is an attribute for the html image tag and not css property. What I'm trying to do is add a background image behind the div that contains "TrendyEats" till "blablabla", so, a picture behind the texts. Does this make sense? — Hello World, Jul 05 '20 at 03:25
I got it fixed! It appears I had to write "Pictures/fruits.jpg" instead of "/Pictures/fruits.jpg" — Hello World, Jul 05 '20 at 03:33

score 0 · Answer 1 · answered Jul 05 '20 at 02:55

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.

Tabeed-H · Answer 2 · 2020-07-05T03:26:23.340

0

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.

edited Jul 05 '20 at 03:26

answered Jul 05 '20 at 03:20

Tabeed-H

3
4

I got it fixed, it appears I had to write "Pictures/fruits.jpg" instead of "/Pictures/fruits.jpg" – Hello World Jul 05 '20 at 03:32

score 0 · Answer 3 · answered Jul 05 '20 at 03:57

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>

Why isn't the background image appearing inside my ?

3 Answers3

Why isn't the background image appearing inside my
?