Changing button image in CSS in Rails/Spree store

Question

I'm creating a Spree store, and trying to make a button use an image instead of the default button that is included with the extension (and bootstrap). I can target the proper button in CSS, and deactivate the background color, border, etc. The background url doesn't work for the image (path: "app/assets/images/heart-icon.png"), but it works fine for any external image url.

I assume my problem lies within the asset pipeline, but I can't figure out the proper path to set as the url.

From my .css file:

form.new_wished_product button.btn.btn-info {
  background: url(assets/heart-icon.png);
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent;
  border: none;
}

The button doesn't need to change when hovered or clicked -- it's just a simple image.

Thanks!

EDIT:

I saw the related question but thought mine was different because I had tried those solutions. I was trying to do this with plain CSS and changing the file extension to .css.scss worked for me.

Possible duplicate of [How to reference images in CSS within Rails 4](https://stackoverflow.com/questions/15257555/how-to-reference-images-in-css-within-rails-4) — Brad Werth, Aug 03 '17 at 01:25

score 0 · Accepted Answer · answered Aug 03 '17 at 01:24

0

Have you tried the image-url() helper instead of url()?

image-url('heart-icon.png');

This will find the asset within your site's file structure.

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

answered Aug 03 '17 at 01:24

Patrik Affentranger

13,245
2
22
25

I have tried that, and it didn't work. I think because mine is a CSS file, not Sass? – pholls Aug 03 '17 at 15:18
I created a new file, button.css.scss, and moved my code into that file, which worked as expected. – pholls Aug 03 '17 at 15:27
Yeah, Sass would be the requirement. That was not clear from the original question unfortunately. – Patrik Affentranger Aug 03 '17 at 15:35

Changing button image in CSS in Rails/Spree store

1 Answers1