Creating a background image with linear gradients in Rails 5

Does anyone know how to implement a background image with linear gradients in CSS? Here is the code snippet I have:

.main-bg-back-1{
    background:linear-gradient(180deg,#22263f,rgba(33,41,94,.96)),url(../img/app/download-bg.jpg) no-repeat;
    background-size:auto,cover;
    background-position:0 0,50% 50%
}

I am working with Rails 5 and typically use 

background-image: image-url("app/download-bg.jpg");
for simple backgrounds. How can I integrate both the image and gradients together in Rails?

htmlcssruby-on-rails

Answer №1

Here is a snippet of code similar to what you are looking for:

.main-bg-back-1{
    background-image: asset-url('download-bg.jpg');
    background-size: cover;
    position: relative;
    height: 100%;
    background-position: 0 0, 50% 50%;
}
.main-bg-back-1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,#22263f,rgba(33,41,94,.96));
    mix-blend-mode: color; 
    left: 0;
    top: 0;
}

Make sure the image is located in app/assets/images and use asset-url.

background-size: auto, cover;

You can choose between using auto or cover, not both. Additionally, the use of mix-blend-mode: color; is optional.

I have tested this code with your gradient value on my Rails application.

Update:

It appears that the comment about the updated code is also functional:

background-image:linear-gradient(),url();

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

Is there a way to obtain metadata for a specific link?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><$BlogPageTitle$></title> <meta property="og:title" content=" ...

javascripthtmlcss

Calculate the product of a JavaScript variable and a PHP variable, then show the result on the

I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...

javascriptphpjqueryhtmlajax

What could be causing my click() function to only work properly after resizing?

It's driving me crazy. The code snippet below works perfectly, but not in my project. Only the code in the resize() function seems to work. When I resize the window, everything functions as expected - I can add and remove the 'open' class by ...

javascriptjqueryhtmldrupalonclick

Why does the styling of the inner Span adhere to the style of the outer Span?

How can I adjust the opacity of the color "blue" to 1 in the code snippet below? <!DOCTYPE html> <html> <body> <p>My mom's eyes are <span style="color:blue;font-weight:bold;opacity:0"> <span style="color:blue;fo ...

javascripthtmlcss

Using Rails to Pass Front-End JavaScript Data from an External API to the Controller

I need to retrieve coordinates from an external API, specifically the Google Maps API, and then send it to my controller. However, I am encountering a 500 internal server error when using jQuery/Ajax for this task. Researching the issue online suggests tha ...

javascriptruby-on-railsajaxgoogle-mapsyelp

How can I update the color of table rows after the ng-repeat has been implemented?

My current project involves Django, Python, and a bit of AngularJS. I have a dynamic history table that grows as data is added. I am looking to apply some simple CSS to this table - specifically, I want to give every even-numbered row a black background ...

javascriptpythoncssangularjsdjango

What is the best way to send information from an MVC controller to JavaScript?

Being new to programming, I am working on 2 projects that function as client-server via Rest API. I am looking to create a column chart using data from a List of ID (participant) and Votes (Total votes) obtained from the server's connection with the d ...

javascripthtmljqueryasp.net-mvcasp.net-core

problem with saving session data

I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...

javascripthtmlcsssession-storage

Calculate the combined sum and alter the values of three input fields

There are three text boxes (testbox, testbox2, testbox3) that receive values from an input field, radio button selection, and checkbox. The correct values are displayed in testbox, testbox2, testbox3. Additionally, the sum of testbox, testbox2, testbox3 n ...

javascripthtml

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

Adjusting the size of an element in Angular JS as a textarea expands

I have created a directive that allows for writing and previewing comments, similar to the conversations in Github. The directive consists of two HTML elements: a textarea and a div (utilizing angular-marked). My goal is to dynamically resize the div as I ...

htmlangularjsresize

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

I am new to advanced coding and currently working on my first responsive Wordpress site. I have a "Product Search" database/site that I'm trying to integrate into my website using an iFrame. I want the integration to look seamless without scroll bars ...

javascripthtmlcssiframe

Guide to Indicating an Icon in Front of an HTML Link and Emphasizing Both with Tap

When using an iOS UIWebview, I am facing the issue of needing to add an icon before standalone links that are within a locally loaded HTML file. In addition to adding the icon, I also need both the icon and link to be highlighted when tapped. The desired ...

htmlioscssobjective-cuiwebview

Duplication of elements in a Meteor and React environment

When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...

htmlmeteorreactjs

Searching for a specific text within a column and displaying only the matching parts

My current dataframe has the following structure: RandomCol raw blah <div style="line-height:174%;text-align:left;font-size:9pt;"><font style="font-family:inherit;font-size:9pt;font-style:italic;font-weight:bold;">We ...

htmlrdataframe

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

I recently created a navigation bar with an integrated search bar component. The styling for my search component was done using MUI styled from @emotion/styled in MUI library, where I applied a borderRadius: theme.shape.borderRadius. However, I encountere ...

javascriptcssreactjsmaterial-ui

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

JavaScript has thrown an error stating that the function in my jQuery script is undefined

I encountered an issue Uncaught TypeError: undefined is not a function in my jQuery script. Here is the code snippet: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link re ...

javascriptjqueryhtmltwitter-bootstrap

The inline variables in CSS transitions are failing to be detected

The CSS transitions are not recognizing the inline variables, or if they are, they are not receiving the correct information. Below is an illustration of how the inline variables are defined in the HTML: <p class="hidden" style="--order ...

javascripthtmlcss

CSS: Ensuring the width is adjusted to the content or wrapper that is wider

I am facing an issue with mouse-over highlighting on a set of list items. Below is the HTML structure I am working with: <div id="wrapper"> <div id="box"> <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex& ...

htmlcsswidthhorizontal-scrolling