Relative path to images from css in custom element

Help Requests
1

Hi

So I have a custom element with the following structure

root/src/resources/elements/notification/notification.ts
root/src/resources/elements/notification/notification.html
root/src/resources/elements/notification/notification.css
root/src/resources/elements/notification/images
root/src/resources/elements/notification/images/notification.png

This works. However, passing the relative path to the image from the css does not.
ie

.notification {
    position: absolute;
    background:transparent url(./images/notification.png) no-repeat top left;
}

If I look at the generated css in the chrome debugger I see

url(resources/elements/notification/images/notification.png) no-repeat top

ie. I need to add the src part of the url.

The relative stuff works when specifying my css from the html file.

ie
<require from="./notification.css"></require>

What is best practice here ?

Thanks

2

Can you try removing the dot: “.”

background:transparent url("images/notification.png") no-repeat top left;

1 Like
3

No that doesn’t work.

At the moment I do

background:transparent url(src/resources/elements/notification/images/notification-yellow.png) no-repeat top left;

Not the end of the world but a little inconsistent with how other relate paths work.

Thanks