I have an app on Heroku written in Rails which has a big image on the landing page as background. As Heroku's file system is read-only, I decided to store these images (they are randomly selected) on AWS S3.
My code in the .css(.scss) looks like this (simplified):
html {
background: image-url('#{image}.jpg') no-repeat center center fixed;
}
My problem now is that my app is able to display the image correctly in development, but it is no able to display the image in production (on Heroku). When looking at the delivered .css file (in the browser), I think I see the error:
html {
background: url("8017416067_4f6f75f956_o.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
It seems that the hash is not appended, although I use image-url
, as seen above and as suggested i. e. here. The filename the file has on S3 is 8017416067_4f6f75f956_o-058c92aeab457efe0625a777f203430d.jpg
.
Any suggestions on what I am doing wrong here?
EDIT: I noticed that in the .css files I get from my local machine, the image is referenced with /assets/8017416067_4f6f75f956_o.jpg
(without quotes), while the online app gives me "8017416067_4f6f75f956_o.jpg"
.
SOLVED: I don't know why, but suddenly it works. The last thing I did was that I deleted the whole public/assets
folder in order to make Heroku precompile the assets itself.