Spree eCommerce - Cannot override css

Question

I need to override my spree store's header colour. I create a custom.css under the ../mystore/vendor/assets/stylesheets/spree/frontend directory. But it does not work. please help

The default css style for spree header is shown as below

#spree-header #header {
    background: rgba(34,34,34,0.4);
    padding: 20px 0;
}

Below is my custom.css file

#spree-header #header {
    background: white !important;
    padding: 20px 0;
}

I expected my spree header to change the colour to white.

Answer 1

You cannot override an rgba() color with an rgb() color.

In this instance, white is a reserved word, representing rgb(255, 255, 255).

Instead of:

background-color: white;

use:

background-color: rgba(255, 255, 255, 1);

---

N.B. background is a multi-value shorthand property.

If you only intend to declare the background color, use background-color.

---

For further info on all the values the background shorthand property can take, see:

https://developer.mozilla.org/en-US/docs/Web/CSS/background

For further info on the background-color property, see:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color