Magento 2 – How to Render Background Images in CSS Pages

cssmagento2

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

Best Answer

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.

Related Topic