Background images are not appearing in Rails production environment

There seems to be an issue with my images not showing up in the production environment (link here).

Here is a snippet of my code:

_header.html.erb

<%if action_name == 'index' %>
  <div class="main_header_bg" id="main_head">
  <% end %>
   <header id='header'>
    <div class="container">
     <div class="logo">
      <%= link_to image_tag('logo.png'), root_path%>
  </div>

main.css

.main_header_bg {
background-image: url(/header_bg.jpg);
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
height: 718px;

production.log

ActionController::RoutingError (No route matches [GET] "/assets/images/header_bg.jpg"):

Directories where images are located:

  1. app/assets/images/
  2. public/assets/images/
cssruby-on-rails

Answer №1

Have you made sure to precompile your assets, specifically in the production environment? It's a common issue that new Rails project developers face when deploying their projects for the first time.

If not, execute the following command: 

RAILS_ENV=production bundle exec rake assets:precompile

Keep in mind that actual files are being generated here and you will need to re-upload your application for the changes to take effect.

Answer №2

One possible reason could be related to the asset pipeline

.header_background {
  background-image: image-url("background_image.jpg");
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  height: 718px;
}

To resolve this, simply replace url with image-url, then precompile and restart the website.

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

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

asp.netcsslistxhtmlrepeater

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements: $(".Element ...

javascriptjqueryhtmlcssjquery-ui

Navbar alignment issue: justify-content-between not functioning properly

The justify-content-between property is not functioning as expected for the navbar. I need the navigation list to expand and cover the entire space with equal spacing between the items. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-boots ...

htmlcssbootstrap-4

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas

Using HTML and CSS to Position Text Within an Image

Is there a way to position an image next to specific points on the screen so that it remains in the same place regardless of screen size? Here is what I am trying to achieve: https://i.stack.imgur.com/A5cop.png Using HTML, this is my desired setup: < ...

htmlcss

Is window.getComputedStyle not functioning as anticipated?

Here is a function I created to determine the width and height of a text: function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` fo ...

javascripthtmlcss

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

javascripthtmlcss

Menu Table displaying errors in layout

I've been struggling to align the menu table to match the homepage, but so far I haven't had any success. It seems like the main index.php page is using its own CSS for some unknown reason. Check out lcrisq.com Here is the desired design: Take ...

htmlcss

Div that dynamically adjusts its size to fit the content before switching to a fixed size

Apologies for the confusing title - finding it difficult to summarize in just one line! I have dynamic content loading into divs and a smooth resizing function that animates the height of these divs to auto. function adjustHeight(div) { var $selector = ...

jquerycss

Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the he ...

htmlcssvideoyoutube

Changing Parameters in Absolutely Positioned Sections

I have successfully created a fixed header with a higher z-index than the body content, allowing the content to slide underneath it. To position the content div directly below the fixed header, I applied a position:relative and specified a top value. Init ...

htmlcssposition

Adjust the height of each card dynamically based on the tallest card in the row

I am working on a row that looks like this: <div class="row"> <div class="col"> <div class="card"> <div class="card-body"> <h3 class="card-title ...

javascriptcssbootstrap-4

JQuery fails to retrieve accurate width measurements

Utilizing this code snippet, I have been able to obtain the width of an element and then set it as its height: $(document).ready(function(){ $(".equal-height").each(function(){ var itemSize = $(this).outerWidth(); cons ...

javascriptjqueryhtmlcss

Using jQuery to apply CSS to elements with multiple potential values

Here's a simple question: using jQuery's css function, you can retrieve the computed style of a CSS attribute. But what if there are multiple styles for that attribute being rendered simultaneously? Let's consider this example: <div id=" ...

javascriptjquerycss

Trouble arises when trying to link IE7 with jQuery

I am currently testing a website with jQuery. There is a plugin that, when hovered over, slides down to reveal another banner, subsequently sliding the banner below it down as well. I have added a link on the bottom banner using z-index, and although it wo ...

jqueryhtmlajaxcss

The progress indicator fails to activate during the first step

As a beginner in coding, I wanted to incorporate a progress bar on my website. However, I encountered an issue where when I try to make step 1 "active", it's actually step 2 that becomes active, and the same pattern continues for subsequent steps. ...

htmlcsswebprogress-bar

Identifying touchscreen capability through media queries

Is there a secure method, utilizing media queries, to trigger an action when not using a touchscreen device? If not, would you recommend opting for a JavaScript solution like !window.Touch or Modernizr? ...

csstouchmedia-queries

What is the best positioning option to choose: "Relative? Static, or something else?"

I decided not to use float for positioning my divs in CSS; instead, I used the position property with relative value. However, when viewing the site on different screen resolutions, all the divs end up getting jumbled. Can someone please explain what I m ...

htmlcsscss-position

A guide on verifying the percentage value of an element's height in Selenium with Java

I was able to retrieve the element's height in pixels using: element.getCssValue("height") However, the height returned was: Height: 560px What I actually need is for the height to be displayed as: Height: 100% Or perhaps Height: 50% ...

javacssseleniumselenium-webdriver