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.

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.

| improve this answer | |
  • 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? – Blas O Gymru Sep 26 '17 at 20:32
  • please add your less file in app/design/frontend/Package/theme/web/css/_module.less – Abhishek Panchal Sep 26 '17 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? – Blas O Gymru Sep 27 '17 at 13:29
  • Is any other less file compiling properly ? – Abhishek Panchal Sep 27 '17 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. – Blas O Gymru Sep 27 '17 at 13:41

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.