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.

https://i.sstatic.net/TpXfG.png

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

Styling Material UI components with CSS is a great way to

I'm facing difficulties while working with Material UI components. Currently, I have a Material UI table and I want to center-align the text within it. The standard CSS of Material UI contains an element named MuiTableCell-root-60 which has a text-a ...

cssmaterial-ui

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

Load css and js files from a directory within Liferay

Is it possible to automatically load all CSS (or JS) files from a specific folder in Liferay 6.2? Below is an example of the liferay-portlet.xml file: <portlet> <portlet-name>Example</portlet-name> <icon>/icon.png</icon ...

cssliferay-6.2

What is the process for connecting a personalized bootstrap framework with an index.html document?

I have recently dived into the world of bootstrap and I just customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/ After compiling and downloading, I found it challenging to link it with my index.html file. The source of the bootstra ...

htmlcsstwitter-bootstrap-3customization

JavaScript toggle display function not functioning properly when clicked

I've been attempting to create a drop-down list using HTML and JavaScript, but for some inexplicable reason, it's just not functioning as expected despite scouring through countless tutorials on YouTube. Below is the snippet of code that I'm ...

javascripthtml

Is the footer html/css duplicated on a different page and displaying differently?

I have been working on a website and just finished the main page with the header, body, and footer. Now, as I moved on to creating the second page, I encountered an issue. I copied and pasted the code for the header from the main page onto the second page ...

htmlcssfooter

What steps can I take to prevent BeautifulSoup from interpreting commas as tab characters?

My recent project involved creating a web scraping code to extract information from a local news website. However, I have encountered two issues with the current code. One problem is that when the code retrieves paragraph data and saves it to a CSV file ...

pythonhtmlcsvweb-scrapingbeautifulsoup

Having trouble getting the full width of a hidden div to work properly?

I am facing an issue with a two-part menu design: the left side consists of a traditional UL, while the right side contains a link within a div element. The fixed-width of the right div is causing complications as the left div needs to occupy all remaining ...

htmlcss

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...

cssreact-bootstrapbootstrap-5

Refining Flask-Generated Table Content with jQuery Filters

I'm currently attempting to render a Jinja2 template that showcases an HTML table and enables dynamic filtering to search through the table content. Unfortunately, I'm facing issues with getting the search functionality to work properly. While th ...

javascriptjqueryhtml

Access information through token-based verification

Just starting out in this area of development, a colleague shared some information with me on how to retrieve the database. I'm feeling a bit lost as to what to do next. curl -X GET -H "Authorization: Token token=xxxxxxxxxxxxxxxxxxxxxxxxx" "https://w ...

javascriptjqueryhtmlajaxauthentication

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

javascripthtmlcss

The customized icon in the Material UI Select component lacks proper vertical centering

Check out this demo link where the dropdown icon is currently not vertically centered. It appears to have extra top padding due to the class "tlm-dropdown-icon", causing it to be off-center. I've tried inspecting the element but couldn' ...

cssreactjsmaterial-ui

Having trouble with my PDO insert query functionality

I've been trying to input the data from my form into the database, but unfortunately, my current code doesn't seem to be working. I followed some tutorials on YouTube for this particular project, and despite following them closely, the data I ent ...

phphtmlpdo

Obtain the Xpath for the element with a certain tag located closest to the given element in its immediate surrounding

Within my HTML document, I have a specific element with an id of uniqueId. There are multiple nested tags surrounding this element, and I am trying to retrieve a particular tag that is closest to it. For example: <div> <div> ...

javascripthtmlseleniumxpath

Tips for aligning a div within a flexbox to the bottom position

I'm having trouble aligning the div at the bottom of the flex box. I attempted to use align-content: flex-end; but it didn't work. Is there a way to keep the <.div class="parameters"> at the bottom of the row? Especially when the ...

htmlcss

Decrease the gap between the ticks on a horizontal bar chart in ChartJS

Currently, I am utilizing the horizontal bar chart feature from chartjs and encountering an issue with the chart appearing too large. In addition, there is a notable gap between the ticks on the xAxis (as shown in the attached image). Does anyone know how ...

javascripthtmlcssangularjschart.js

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

jquerypythonhtmlflaskwtforms

When making a jQuery + AJAX request, IE8 is causing a null return value

I'm completely stumped as to why this issue is happening. To start, the code has been checked and validated by the W3C validator as HTML5, except for some URL encoding problems (such as & needing to be &amp;), but I don't have the ability ...

javascriptjqueryhtmlajaxinternet-explorer

Element was removed upon clicking only once

Can anyone help me figure out why the behavior of .remove() with $postNav.remove(); is different here? When you click on "I'm a tag" for the first time, both the <li> and <ol> are deleted as expected. However, on the second click, only the ...

javascriptjquerycsshtml