collection of random header images for a ruby on rails website

Can anyone help me with an issue I'm having? I am trying to randomize images in a header on a category page using the following code, but it doesn't seem to be working. I keep getting this error:

Invalid CSS after "...ackground: url(": expected ")", was "<%= randomized_..."

The problematic line of code is:

#necklace_header {
    background: url(<%= randomized_header_image %>) no-repeat center center fixed;
    width: 100%;

In my views/categories/show.html.erb file, I have the following code:

<header id="necklace_header">
<h1>
  <%= @category.name %>
</h1>
</header>

<%= render "categories/table", products: @products %>

<% if current_user && current_user.admin? %>
    <%= link_to 'Edit', edit_category_path(@category) %> |
<% end %>

<%= link_to 'Back', root_path %>

In my categories.scss file, I have the following code snippet:

#necklace_header {
    background: url(<%= randomized_header_image %>) no-repeat center center fixed;
    width: 100%;

    background-size: cover;  
    height: 360px;
    margin-bottom: 20px; 
}

Additionally, in the application_helper.rb file, I defined the function for randomized_header_image as follows:

module ApplicationHelper
    def randomized_header_image
        images = ["assets/foo.jpg", "assets/random.jpg", "assets/super_random"]
        images[rand(images.size)]
    end
end

As someone new to Rails and web development, I am struggling to resolve this issue. Any assistance or clarification would be greatly appreciated.

Answer №1

After receiving confirmation from the original poster that my suggestion was successful, I have decided to revert it back to an answer for the benefit of future readers.

In the scenario where you are dealing with a .scss file, ERB code will not be effective. However, you can try utilizing

asset-url('randomized_header_image')
which should resolve the issue. It's worth noting that asset-url is a SASS helper.

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

Turn off the Antd Datepicker tooltip

I'm using Antd Datepicker in my website. We get an array of numbers representing disabled dates from an external api and show only the dates in the datepicker(no month, year etc). The date selection is for a monthly subscription and the user just sele ...

Opacity Vertical Gradient Text Design

Currently exploring various methods in CSS3, jQuery, SVG, or canvas to achieve a specific effect, but encountering some challenges along the way. Key considerations to take note of: The text gradient is vertical with opacity The text could span multiple ...

Delete the selected background color from custom drop-down lists in versions of Internet Explorer 9 and earlier

In my asp.net application, I have a dropdown element. I am trying to remove the default blue background color that appears when the dropdown is selected, as shown in the image below. I have tried all the solutions provided in this link, but none of them s ...

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Is there a way to exclude a specific item from the navbar collapse box when the screen size becomes small? Here is the current HTML code: <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> ...

Chrome distorts background images with CSS when resized

One thing I noticed is that Chrome seems to display CSS background-images differently compared to using the <img /> tag. I tested two identical images resized to the same dimensions The first image set as a CSS background-image appeared pixelated W ...

"Utilize Bootstrap 4 to create a 5-column row layout featuring lengthy text

I'm familiar with how bootstrap 4 uses col instead of col-xs, but I've encountered an issue. When the text within a column is too long to fit on a small screen, the columns begin to stack below each other. Is there a way to prevent this and set t ...

Tips for locating direct children of a non-root element using CSS selectors in Selenium

When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...

Material-UI - Switching thumb styles in a range slider

Looking for a way to style two entities differently on the Material-UI Slider? Entity A as a white circle and Entity B as a red circle? While using data-index can work, there's a flaw when sliding. Is there a better approach? if (data-index === 0) { ...

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

Guide to locating a child element using CSS from a given web element

<div id='example' /><div> When looking at the provided example, the goal is to locate a div under the following conditions: WebElement divelement = driver.FindElement(By.css("#example")); My objective is to locate the div tag wit ...

Store user input in a paragraph

I want to create a unique program that allows users to input text in a field, and when they click "Start", the text will appear in a paragraph backwards. I plan to use Html, jQuery, and CSS for this project. Can anyone provide guidance on how to achieve th ...

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...

From plain to vibrant: Using CSS gradients for background design

I have customized a button by adding a gradient to it. Below is the code snippet: .mybutton { background: #258dc8; /* Old browsers */ background: -moz-linear-gradient(top, #258dc8 0%, #258dc8 100%); /* FF3.6+ */ background: -webkit-gradient( ...

Ensure that the background-color stretches across the entire width of the screen

This text needs to be centered and the background color width should cover the entire screen. Unfortunately, I couldn't find a solution for it here. .carousel-content { text-align: center; bottom: 0px; opacity: 0.8; displ ...

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

Problem with Labels Overlapping and Blocking Text Fields

My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times? Prior to engagement: https://i.stack.i ...

chosen problem concerning jquery

My objective is to transfer li elements from one container to another container when the user clicks on the li span. I have a choices container and a choices display, so when a user clicks on the li span with the id of "add" in the first container, the r ...

What are the best scenarios for utilizing the Bootstrap class “.embed-responsive-item”?

I'm hoping for some help understanding the purpose of the ".embed-responsive-item" class in the code snippet below (Bootstrap code for responsive iframes, videos, etc.). It seems redundant to apply this class to the iframe element when it works just f ...

What is the process for spinning an image?

Is there a way to rotate an image around its center? I am looking for a solution where the image rotates continuously when clicked, but stops if an ajax call is unsuccessful. Please assist me in finding a resolution. ...

Shrink or vanish: Creating a responsive header image with Bootstrap

Looking to create a dynamic header with different sections such as headerright, headercenter, and headerleft, each with unique content. I've successfully added an image to the header, but when I resize the page or view it on a mobile browser, the ima ...