I'm trying to add a background image to a div in the template advertisement.phtml of my custom page layout home_custom.xml.

For this, I have the following CSS in my _extend.less file:

div.outer {
    display: flex-inline;
    border: dotted;
    background: url('@{baseDir}images/advertisement.png');

Below is my custom theme's tree structure:

├── Magento_Theme
│   ├── layout
│   │   └── default.xml
│   ├── layouts.xml
│   ├── page_layout
│   │   └── home_custom.xml
│   ├── templates
│   │   └── advertisement.phtml
├── media
│   └── preview.png
├── registration.php
├── theme.xml
└── web
    ├── css
    │   └── source
    │       └── _extend.less
    └── images
        ├── advertisement.png
        └── logo.svg

However, I see the dotted border, but not the background image. How should I fix this issue ?


Follow code:

div.outer {
    display: flex-inline;
    border: dotted;
    background: url('../images/advertisement.png');

Your extend.less by compiling the above code arrives in styles-l.css and styles-m.css files in /pub/static/frontend/Magento/Theme/en_GB/css and the image advertisement.png is in /pub/static/frontend/Magento/Theme/en_GB/images, so you must exit the css folder and enter the images folder, both of which are at the same level.

  • I tried it, but it doesn't work unfortunately. – DevonDahon Nov 8 '17 at 15:05
  • You must run command in terminal: php bin/magento setup:static-content:deploy --theme=Magento/Theme – St3phan Nov 8 '17 at 20:53
  • It still doesn't work after deploying static content, do I need to declare the image file somewhere first ? – DevonDahon Nov 9 '17 at 3:38

The problem came from AdBlock, the name of my picture contained the word advertisement, this is why the image was blocked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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