Magento 2 - Where to put images to use in css

Question

What is the best location to put the images that I use in my custom css file? And what is the best way to get to the image from the css file?

The location of my custom css is: app/design/frontend/theme/themename/web/css

I have Magento in developer mode.

Magento does something when deploying the files and I don't know if the location of css and image will change...

Regards, Robert

Answer 1

You have to keep images in below path

app/design/frontend/Vendor/YourTheme/web/images

So the full path for image demo.jpg will be

app/design/frontend/Vendor/YourTheme/web/images/demo.jpg

Your CSS file path for custom.css

app/design/frontend/Vendor/YourTheme/web/css/custom.css

Now you can use that demo.jpg image in the custom.css file as below

.test{background: url('../images/demo.jpg');}

Now run the below commands

php bin/magento setup:static-content:deploy -f

php bin/magento cache:flush

Answer 2

You can use : ../images/some-image.png.

1. Your css in : app/design/frontend/{Vendor}/{themename}/web/css/stylename.css.

   .div-name{
       background-image: url('../images/some-image.png');
   }
   

2. Your image in : app/design/frontend/{Vendor}/{themename}/web/images/some-image.png.

3. Deploy the static content. php bin/magento setup:static-content:deploy -f.

Answer 3

The best location to put the images is (If using anywhere in theme):

app\design\frontend\theme\themename\web\images

And the best way to get image from the less file is :

background: url('@{baseDir}images/filename.png')no-repeat center center;

Note: The location of images will never change When you use '@{baseDir}'