CODEWITHSUNDEEP
htmlcssimagegoogle-chromefirefox
user15487835
user15487835

Reputation:

svg image not showing up in firefox, chrome

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>

Upvotes: 0

Views: 104

Answers (1)

Evgenii Bazhanov
Evgenii Bazhanov

Reputation: 926

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);

Upvotes: 1

Related Questions