T.Kul T.Kul - 25 days ago 10
CSS Question

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

Answer

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