Magento2 : Adding my own Background Image to a Custom Theme

Question

I've added a custom magento theme, and now im trying to add a background image to it.

But the dev console in chrome & firefox keeps saying:

"Could not load the image".

I've put the image in both of these directories:

/web/css/source/images/brushed_alu.png

/web/images/brushed_alu.png

And then my _extend.less is:

body {
  background: #fff url(/images/brushed_alu.png) top center;
}

I've cleared cache and static files, but it just igves me the "Could not load the image" error in both chrome & firefox.

Any ideas?

Answer 1

Place your image at below location

magento_root\app\design\frontend\Themes_Package\theme\web\images

Put this code into your .css file

body{
    background: url('../images/brushed_alu.png')top center;
}

Put .css file of your theme at this location

magento_root\app\design\frontend\Themes_Package\theme\web\css\style.css(your .css file)

After that fire these commands from your root directory of Magento

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Answer 2

web/css/_extend.less

body {
    background: url(../images/brushed_alu.png) top center;
}

Place your image in web/images/brushed_alu.png

it should work.