In this article, we are going to understand how to change the background image of the page in Magento.

Requirement for performing this step is you must have your own theme or you can have installed theme in the Magento2 project.

Tip:- The core files of Magento2 should not be modified for any work. Do not modify core files.

This can be achieved by following below steps:

Step1 : _theme.less and _extend.less file

Step2: Upload background image

Step3: Add background image code in _theme.less file

Step4: Add reference in the _module.less file

Step5: Deploy changes on the site

Lets start with the Step 1.

Step1 : _theme.less and _extend.less file

In this step, copy _theme.less and _extend.less file from your parent theme Ex. [Magento_Luma_Theme_Path]/web/css/source/_theme.less and [Magento_Luma_Theme_Path]/web/css/source/_extend.less

and paste these file in your current theme app/design/frontend/Vendor/Theme/web/css/source/

[Magento_Luma_Theme_Path]:=> <magento_root_dir>\vendor\magento\theme-frontend-luma\web\css\source

 

Step2: Upload background image

Here we will put the background image in the path – C:\xampp\htdocs\magento2\app\design\frontend\Vendor\Theme\web\images

 

Step3: Add background image code in _theme.less file

Update the _theme.less file of app/design/frontend/Vendor/Theme/web/css/source/

with the content –

@page__background-image:url('../images/bg.jpg');

 

Ex: – bg.jpg is the background image name

Step4: Add reference in the _module.less file

In this step, copy _module.less file from C:\xampp\htdocs\magento2\vendor\magento\theme-frontend-luma\Magento_Theme\web\css\source

to C:\xampp\htdocs\magento2\app\design\frontend\Vendor\Theme\Magento_Theme\web\css\source

Update the _module.less in your theme with the below content–

Add the highlighted line.
& when (@media-common = true) {

body {

.lib-css(background-color, @page__background-color);

      .lib-css(background-image, @page__background-image);

}

Step5: Deploy changes on the site

Let first remove directories contents /pub/static/frontend/Vendor/Theme/en_US and  var/view_preprocessed.

and then Run the below command to compile static contents.

php bin/magento cache:flush

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

 

All set, let go the browser, hit your base url and see the magic

Comment below for the feedback and for any help.

Happy Learning !

Thank You !