Search code examples
cssspree

Spree 3.1 CSS path for .spree-header background-image

In Spree 3.1 Standard Themes (out of the box)

I tried to change background image.But not work. Perhaps the path is wrong. Help need. Here what I did.

  1. Upload image to be /app/assets/images/NewBackGroundImage.png
  2. Add css in vendors/assets/stylesheets/spree/frontend/custom.css

CSS:

.spree-header{
    background-image: url("/assets/images/NewBackGroundImage.png");
    background-size: cover;
    margin-bottom: 10px;
}
  1. Here my inspect of the current page enter image description here

This part is my attached screen shots for my comment of the answer below.

Page Inspect Files Tree

At the inspect screen it clearly display error 404 (Not Found) enter image description here

Tried change to use asset-url then enter image description here

SCSS:

Then Change my custom.css to custom.scss change custom to scss

And this is the inspect shot NOW IT WORK inspect shot

Solution

  • As I can see, your page doesn't use your styles at all. Are you sure the div tag has the class "spree-header". Because in your browser it only has id "spree-header" and nothing about the respective class. Try to replace it from .spree-header to #spree-header. If there might be confrontation between styles, then you can always try the usage of !important tag: url(...) !important;

    If the folder "vendors" is in the "app" folder, then you can use the relative path url("../../../../../assets/images/NewBackGroundImage.png") as well