Enhancing the Background with CSS Assets in Rails 4

I've encountered an issue with my app that I deployed to Heroku. While the CSS background loads perfectly in my development environment, it's not displaying in my production environment.

body {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    background: url('letters.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

After reading an article on Heroku, I tried adding this line to my application.rb file:

 config.assets.initialize_on_precompile = true

However, the article mentioned that I may not need to do this if I have the 'rails_12factor' gem installed. Could my syntax be incorrect, or is there another piece of code missing somewhere?

Answer №1

To improve efficiency, consider using url(asset-path('letter.jpg')) in place of url('letters.jpg'). Additionally, for compatibility with Heroku, ensure that you precompile your assets locally before pushing them to the server. To achieve this, execute the following command: $rake assets:precompile, then upload the resulting asset files to Heroku.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Grid layout showcasing masonry gallery

I've spent some time looking for a Masonry gallery with a grid layout, but couldn't find one that suited my needs. So, I decided to create my own. I implemented a customElement with grid layout, but encountered an issue when trying to assign grid ...

Looking for a way to make a button glide down to the bottom of a card in a

I need to ensure that the contact button in each card floats to the bottom, regardless of the amount of text within the card. This will create a uniform appearance with all cards having the contact button in the same position. Here is an example of how on ...

Ways to create distance between 2 select elements with CSS?

Having trouble with the spacing between two select fields on a form? Specifically, you want the start time, start time meridian, end time, and end time meridian all in a single line. Any suggestions or solutions to this issue would be greatly appreciated! ...

How can I adjust two overlapping divs for proper display?

It seems like I have two divs overlapping on the same line. The layout appears fine on a PC but not on an iPad or mobile device. Can someone please review the code and point out any mistakes I might have made? The issue is with the content overlapping the ...

When using AngularJS ng-controller, the HTML href does not effectively call any div elements

As I was working with HTML and using AngularJS ng-controller, I encountered an error in the URL where a slash appeared. For example, localhost:8080/test/#/m1. Can someone please provide guidance on how to resolve this issue? <style> a{ } ...

Placing an item from a "stack" onto a separate line on smaller screens

My goal in Bootstrap is to achieve the design shown in this image: https://i.stack.imgur.com/9Eoen.png The first layout can be achieved by placing B and C within the same div container. The second layout can be accomplished by defining C on a new row ind ...

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

JS not functioning properly in specific pages causing display issues with page height set to 100%

I am facing an unusual issue where certain pages do not stretch to 100% page height in the middle section, causing the left-hand border to be incomplete. For example, on the 'Brentwood' site (please click on the 'Login' link in the top ...

What is the reason behind the variation in CSS caused by spaces in HTML markup?

I've come across a particular markup structure that has caught my attention: <!-- .section markup with line breaks and indentation (normal formatted coding) --> <form id="form" name="form"> <div class="section"> <input type ...

What is the best way to add a scrollable tbody section to an HTML table?

I am encountering an issue while attempting to make the tbody section of an HTML table scrollable. Consider this basic HTML table: <table border="1" class="scrollableTable"> <thead> <tr> <th width="14.2%">R ...

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

Dealing with null values in Ajax responses with coffeescript

I am currently facing an issue with my ajax code written in CoffeeScript. Although the response containing JSON is visible in the browser's panel, all variables remain undefined on success. Can anyone provide assistance with this? Below is the snippe ...

Move a div element to the foreground while maintaining its fixed position

I had a situation where I used the fixed position for a div on a webpage to keep it stuck at the top like a header. However, when scrolling, it ended up getting hidden behind other elements such as divs, videos, and text! Here's how the div should al ...

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

What is the process for displaying the ™ symbol above the XYZ text?

How can I position the ™ symbol slightly above the XYZ text? <div> <div style="display: inline-block; border: 1px solid red;"> XYZ </div> <div style="font-size: 0.6em; border: 1px solid red; display: in ...

Can the navbar hamburger in Bootstrap be displayed at a screen size of 992px?

How can I display the bootstrap navbar Hamburger at md(992px) Screen? Here is the code snippet I am currently using: https://i.sstatic.net/OqBTQ.png Any suggestions on what steps I should take? ...

What is the best way to switch the orientation of divs from horizontal to vertical with CSS?

I currently have a footer setup with 3 divs that are displayed horizontally at the bottom of the page. <div class="footer-text footer_mainDIV"> <div class="footer_leftDIV"> All rights reserved </div> <div class="fo ...

What could be causing the gap between my hero image and the about section to appear when I adjust the page height?

As I am relatively new to creating responsive CSS, I haven't had much experience yet. When you open the code below in full screen and adjust the tab height, you'll notice that the smaller the height, the larger the gap between my hero and about s ...

What are some alternative methods to achieve the same styling in CSS for IE6 without using

Can you please provide the standard equivalents for the following IE6 css hacks? .header { zoom: expression(runtimeStyle.zoom=1); z-index: 1; } .hmenu ul li { float: left !important; } ul.hmenu li { margin-left: expression(this.previousSibling= ...

linking in Ruby on Rails

I'm facing a bit of confusion with something that may seem minor: Could someone guide me on how to create a hyperlink from one ruby-file.html.erb to another? ...