1

I have a custom theme on Magento 2.1.7 installation, based on the Blank theme. I am trying to amend the header block to have a background image (behind the logo - though this is not important). I have read a couple of questions and answers and nothing seems to be working. I have amended my _theme.less file and tried two suggestions:

a)

.page-header {
    background-image: url("../images/bog_headerimage.jpg");
}

b)

.page-header {
    background-image: url('@{baseDir}images/bog_headerimage.png');
}

another suggestion was to add the background-image line in the Magento_Theme/css/source/_module.less file, i.e :

.page-header {
    .lib-css(background-color, @header__background-color);
    border-bottom: 1px solid @border-color__base;
    margin-bottom: @indent__base;
    background-image: url("../images/bog_headerimage.jpg");
}

After each change, I have flushed the cache, I have removed var/view_preprocessed and pub/static files but the image does not appear.

Am I missing some step or doing something wrong? Would be really grateful for any help with this.

1 Answer 1

0

Use image url without double quote.

.page-header { 
    background-image: url(../images/bog_headerimage.jpg); 
}

Please make sure that your image is in correct folder.

7
  • I have taken the quotes out and checked that the image file is in the correct images folder. Tried again in the _theme.less file and the _module.less files. Still not showing the image. Is there any easy way to test another change to the header so I can check that the LESS file is working? Sep 26, 2017 at 20:32
  • please add your less file in app/design/frontend/Package/theme/web/css/_module.less Sep 26, 2017 at 20:44
  • Hi Abhishek, it's still not working. I'm puzzled as I've followed the steps for creating a custom theme, and have added the .page-header line into the module.less file and the image seems to be in the right location. Im just wondering how I test that Magento is actually picking up my theme, do you have any suggestions? Sep 27, 2017 at 13:29
  • Is any other less file compiling properly ? Sep 27, 2017 at 13:37
  • Ive just checked the files in var/view_preprocessed and there seems to be a folder structure for my theme there, but when I look at the _module.less file it doesn't have the .page-header that I added in my theme's less file. Sep 27, 2017 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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