HTML SVG Basics Introduction to SVG SVGs as Images

Azzie Fuzzie
Azzie Fuzzie
4,810 Points

Background star not appearing

My code is exactly like the video but my image does not appear

HTML

<div class="wrapper">

 <div class="star">
  <img src="img/star.svg" alt="star">
 </div>

<div class="background-text">
    <p>This text is on top of the image</p>
</div>

</div>

CSS

.star, .background-text{ width: 20%; margin: 1em auto; }

.background-text{ color: #FFF; background:transparent url('../img/star.svg') center center no repeat; height: 300px; }

1 Answer

joelearner
joelearner
48,725 Points

Hi Azzie,

I took a look at your code. You have only one small error in your CSS. For your .background-text, make sure to include a hyphen for "no-repeat". Your code will now look like this:

.star, .background-text{ width: 20%; margin: 1em auto; }

.background-text{ color: #FFF; background:transparent url('../img/star.svg') center center no-repeat; height: 300px; }

Cheers!

Azzie Fuzzie
Azzie Fuzzie
4,810 Points

Hi,Thanks it worked but now the text doesn't appear on the image it appears above.