Magento 2 page-header background color

Question

I want to change the background color to black on luma theme page-header. i am using luma as my default template - what is the best way to go about? - I am using github version fresh Magento 2 install, the templates are store in frontend/Magento/Luma - firebug directs me to {.page-header} pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Answer 1

The easiest way to add simple styling to a magento 2 store is to add your code here:

ADMIN> CONTENT> Design> CONFIGURATION

Click Edit for the appropriate view (global, website or store) and Theme (in your case Luma):

Open tab HTML Head, under Scripts and Style Sheets, you can add the following:

<style type="text/css">
@media (min-width: 768px), print {
 .page-header {
 background-color: black
}
</style>

Click Save Configuration

Clear Cache

• dawhoo: And if you only want to change the grey bar at the top <style type="text/css">@media (min-width: 768px), print {.page-header .panel.wrapper {background-color: #39c} </style>

Answer 2

For the sake of simplicity you can try to change the color in app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less:

@header__background-color: @color-black;
@header-panel__background-color: @color-black;

then clear pub/static and var/view_preprocessed directories and subdirectories, except for pub/static/.htaccess.

though this direct change is obviously discouraged. You need to create a custom theme.

• roger: _module.less? this file is not part of web/css/source
• Arkadii Chyzhov: github.com/magento/magento2/blob/develop/app/design/frontend/…. this less file will be used to create css. Have you already tried to change it?
• roger: found the _module.less - it did not work.. deleted var/view_preprocessed, cache and pub/static/ also php bin/magento setup:static-content:deploy
• roger: I was able to achieve by adding background-color: #000; under .page-header { ....the above method didnt work. is it possible to call in image as my background from there ?
• roger: i tried this to _module.less, background-image: url("@{base-url}/images/bg.png"); it didnt work - any suggestions

Answer 3

.page-header { background-image: url("/logoimages/Violets_Bgnd2.png"); }