HTML SVG Basics Introduction to SVG SVGs as Images

don't work ..

I have followed but it is not getting the result as I see in the course: no font shows in 'red' and no BG image... Thanks for the help, in advance.

<main.css> *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { font-family: 'Nunito', sans-serif; color: #384047; }

.wrapper { max-width: 90%; margin: 10px auto; padding: 10px 20px; background: #f4f7f8; border-radius: 8px; }

.imag1, .image-text{ width:30%; margin:auto; }

.image-text { color: "red"; background:transparent ('../img/star.svg') center center no-repeat; }

h1, h2 { margin: 30px 0; text-align: center; }

<INDEX.HTML> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scalable Vector Graphics</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body>

<h1>SVG Example</h1>

<div class="wrapper">

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

  <div class="image-text">
    <p> dhfaouhfl hgauhldugh </p>

  </div>



</div>

</body> </html>

2 Answers

I modified this code

.image-text {
    color:red;
    background:transparent url('../img/star.svg') center center no-repeat;
    height: 200px;
}

The color doesn't need quotes. And the image didn't display because the path should be preceded by url. I also added a height like shown in the video.

Thank you, Kris!