How to add an image in page-header?

Question

How can I add an image in my page-header though _module.less? I can change the background color.

Is this the correct way to call an image?

background-image: url("@{base-url}/images/bg.png")

full link to

app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less

where should the image be stored?

Answer 1

use background-image: url('@{baseDir}images/cards.png');

An image will be accesible in pub/static/frontend/Magento/luma/en_US/images

Answer 2

You need to add an style in your theme. And add a style similar to this one that I have. The image should be in pub/media folder.

.page-header {
        background-image: 
           url('http://52.191.248.208/rootfolder/pub/media/wysiwyg/header.jpg'); 
}

Answer 3

If you're working with a theme, you can add a background image to your page header using a **.less** file as below.

1. First, place your image in the web/images directory of your theme.

2. Then, in your .less file (it could be _extend.less or any other .less file you're using for your styles), use the @{baseDir} variable to get the base directory of your static files.

Here's an example:

.page-header {
    background-image: url('@{baseDir}images/my-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Replace my-image.jpg with the actual image file name.

This will set the image as the background for the .page-header class. The background-repeat: no-repeat; line ensures that the image does not repeat, and background-size: cover; ensures that the image covers the entire area of the header.

After making these changes, you'll need to clear the static files and flush the cache for the changes to take effect. You can do this from the command line in your Magento root directory:

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