magento 2 : How to render background images in css pages

Question

How do you render a background image on a css page.

i.e

#account-links--point {

  background-image: url(/images/pop-up-box-point.svg); 

}

i realise that for a less you can do this:

@{baseDir}images/home-slider/slide-1.jpg

but my css does not use less.The url for my css is:

\app\design\frontend\myTheme\Theme-frontend-default\web\css\local-m.css

the images are stored in my theme folder;

\app\design\frontend\Mytheme\Theme-frontend-default\web\images

Answer 1

I have the same problem with images and css to use image as background image.

So the answer is:

#account-links--point {
  background-image: url('../images/myimage.png');
}

".." will tell browser to go back to parent directory that is web directory and look inside images directory for the image file.

This is valid way because if you have development, staging and production website then you don't have to change the domain name everywhere.

Answer 2

I know it might not answer your question in full but how about changing the image directory to pub/media/theme_images and using:

#account-links--point {

  background-image: url('www.mydomain.com/media/theme_images/myimage.png'); 

}