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


3 Answers 3


You have to keep images in below path


So the full path for image demo.jpg will be


Your CSS file path for 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


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

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

        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.


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


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}'

  • 1
    Hi Chandra, I'm using a normal plain css file, I think @{baseDir} cannot be used in that?
    – n00bly
    Oct 11, 2018 at 10:47
  • 1
    @n00bly you can't use @{baseDir} in css files. Only less file. Because less files are compiled and create css files.
    – yvzyldrm
    Jan 21, 2020 at 9:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.