You're having problems with 2 parts of the heroku system:
Asset fingerprinting basically adds an MD5 hash to the end of your asset files, to keep them unique & dependent of any relations they have in the file. It's important because each time you compile your assets, they generate these new filenames which will cause standard CSS to mess up
You need to do this with all of your asset references in your CSS:
Change your CSS files to .css.scss
Unlike static CSS, SCSS is compiled dynamically, and can parse ruby code. This means you can reference your assets like this:
background-url: asset_url('/nav_bar/nagivgation_bg.png');
Do this for your CSS files and the references should be okay
Heroku needs you to run static assets in Rails. This is very simple to do:
#/config/environments/production.rb
config.serve_static_assets = true
Update
Here is some live code to demonstrate where to include dynamic helpers in the .scss file:
.confirmation .action_bar a.confirm {
color: #fff;
background: asset_url('modals/confirm_button/bg.png') top repeat-x;
position: relative;
margin: 0 0 0 7px;
}