I have a fresh Magento2 working and I am using Luma as my template.

I want to add a costume image on the header that goes across the template, behind the logo.

Firebug directs me to:

page-header pub/static/frontend/Magento/luma/en_US/css/styles-l.css

I realize this is static location, so, I am not suppose to edit it.

where shouldI start? I just want edit the default luma theme and I don't want add another costume theme. Since I am using the github the templates are stored in frontend/Magento


go to


override the css by simple adding these line

.logo {
   img {
     max-height: inherit;
    // add here you want to add just like css

for adding the background in header

.page-header {
    background-color: #000;

for adding the background image

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

| improve this answer | |
  • I tried it didnt work. thank you though. looking at the _theme.less - i dont see how this would work? this looks looks nothing like what _theme.less looking for... – roger Feb 16 '16 at 14:45
  • after tried did you depoly-content again? and var/view-processed folder – Qaisar Satti Feb 16 '16 at 15:03
  • yes i did. I added it to bottom of the _theme.less. depoly-content, cleared cache...perhaps you can provide something more simple if you dont mind. say i want to change the background color of the header instead of adding an image. – roger Feb 16 '16 at 16:45
  • added the simple code for adding the background color for header. – Qaisar Satti Feb 17 '16 at 4:45
  • Thank you I was able to achieve this by going to app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less: added "background-color: #000;" .page-header { which already exists. is it possible to call in image from there – roger Feb 17 '16 at 15:17

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.