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

up vote 1 down vote accepted

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

  • 1
    Thank you for the explaining answer. – n00bly Oct 12 at 7:31

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.

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 css file is :

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

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

  • Hi Chandra, I'm using a normal plain css file, I think @{baseDir} cannot be used in that? – n00bly Oct 11 at 10:47

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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