CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 18859

Background svg image doesn't work in ::before pseudo element

I'm having an issue trying to apply a svg background image to the ::before pseudo element of another element.

The problem is that the image is just not showing up. When I check out the element in the browser tools, there's no ::before pseudo element at all.

Here's my HTML:

<section class="spotlight">
  <div class="container">
    <div class="row">
      <p>Lorem ipsum dolor sit amet, etiam lorem adipiscing elit.</p>
    </div>
  </div>
</section>

And my CSS:

.spotlight {
        background-color: #4c5c96;
    }

        .spotlight::before {
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
        }

I have a fiddle here: https://jsfiddle.net/fcwp29qw/

The problem isn't with the pseudo element, I can add content to ::before and it works fine: https://jsfiddle.net/fcwp29qw/1/

There also isn't a problem with the background image format, I can add it to the element itself instead of ::before and it works: https://jsfiddle.net/fcwp29qw/2/

So what am I doing wrong here?

Upvotes: 0

Views: 767

Answers (1)

Niran Yousuf
Niran Yousuf

Reputation: 73

You can try this

.spotlight {
  background-color: #4c5c96;
  position : relative;
}

.spotlight::before {
  position : absolute;
  content: '';
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
}

Upvotes: 1

Related Questions