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
Solution
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
OTHER TIPS
You can use : ../images/some-image.png
.
Your css in :
app/design/frontend/{Vendor}/{themename}/web/css/stylename.css
..div-name{ background-image: url('../images/some-image.png'); }
Your image in :
app/design/frontend/{Vendor}/{themename}/web/images/some-image.png
.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 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}'