My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3.
In my .css(.scss) code, the relevant section looks like this (simplified):
html {
background: image-url('#{image}.jpg') no-repeat center center fixed;
}
However, an issue has arisen where the app successfully displays the image in development but fails to do so in production (on Heroku). Upon examining the delivered .css file in the browser, it appears there might be an error:
html {
background: url("8017416067_4f6f75f956_o.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
}
It seems that despite using image-url, the hash is not being appended as expected. The filename for the image on S3 is
8017416067_4f6f75f956_o-058c92aeab457efe0625a777f203430d.jpgCould you offer any suggestions or insight into what might be incorrect in my approach?
EDIT: I've observed that the .css files from my local machine reference the image with
/assets/8017416067_4f6f75f956_o.jpg"8017416067_4f6f75f956_o.jpg"SOLVED: Without fully understanding why, suddenly everything started working. The final action I took was deleting the entire public/assets folder to allow Heroku to precompile the assets internally.