0

I got an HTML code and when it's a live server (localhost) I can see the .svg image. Once I open the file in firefox or chrome, I cannot see the image.

.status {
  text-align: center;
  max-width: 25rem;
  margin: 0 auto;
}

.rating {
  padding: 0.5rem;
  background-color: var(--light-grayish-magenta);
  font-weight: 800;
  color: var(--very-dark-magenta);
  border-radius: 7px;
}

.rating::before {
  content: '';
  width: 6.25rem;
  height: 1rem;
  margin: 0 auto;
  display: block;
  background-image: url(../images/icon-star.svg);
  margin-bottom: 1rem;
  background-repeat: space;
}
<div class="status flow-content">
  <div class="rating">Rated 5 Stars in Report Guru</div>
  <div class="rating">Rated 5 Stars in Reviews</div>
  <div class="rating">Rated 5 Stars in BestTech</div>
</div>
Zoe
  • 27,060
  • 21
  • 118
  • 148
  • 1
    CHECK your browser console , probably the img path isn't correct – Sfili_81 Nov 12 '21 at 12:41
  • Console has all answers, maybe you didn't put the right path or something... –  Nov 12 '21 at 12:47
  • Does this answer your question? [How to give the background-image path in CSS?](https://stackoverflow.com/questions/20047364/how-to-give-the-background-image-path-in-css) – simo54 Nov 12 '21 at 12:56
  • I did check the console now and it does say that it's failed to load the file.. I tried the img path, didn't work. I'll try a few other options and see what happens. Thank or the suggestions –  Nov 12 '21 at 15:55

1 Answers1

1

it should work if you will wrap your path in single quote

background-image: url('../images/icon-star.svg');

or without quote try

background-image: url(icon-star.svg);

Evgenii Bazhanov
  • 898
  • 1
  • 7
  • 19