What could be causing the issue with my linear gradient not displaying correctly on top of my background image in Rails and Sass?

I am struggling to get a linear gradient to display over a background image. Despite trying various solutions from other questions, I still can't get it to work with my current code...

    .bottom-pic {
        width: 100%;
        height: 425px;
        background-image: url("bottom-img-3.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 0 -255px;
        position: relative;
      }

      .overlay {
          background: linear-gradient(-180deg, #20202C 34%, rgba(32,32,44,0.00) 81%, #20202C 100%);
      }

Despite implementing this code, the gradient is not appearing as expected.

csssass

Answer №1

Remember, an element can only have one background image. If a background image is already specified by a URL, any additional backgrounds will be disregarded.

If you want to overlay an image, you'll need to insert another DIV element inside your main element with the background image and apply a gradient background there. Be sure to match the width and height of the nested element with its parent element.

Answer №2

The compatibility of your website design will vary depending on the browser being used by you or your visitors. Some browsers require prefixes for certain CSS properties, such as -webkit-linear-gradient....

For assistance with adding prefixes to gradients, you can utilize this helpful tool:

If you need a more general solution for CSS prefixes, consider using this resource:

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

Obtain the beginning and ending positions of a substring within a larger string

As a beginner in the world of AngularJS and web development, I am faced with a challenge. I have a specific string that is currently selected on a tab, like so: var getSelectedText = function() { var text = ""; if (typeof window.getSelection !== "un ...

javascriptjquerycssangularjshtml

Halt the adhesion of the Bootstrap column when it hits the div section

I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...

javascriptjquerycsstwitter-bootstrap

Issues with aligning center vertically and horizontally using flexbox are causing unexpected behavior

Understanding the basic concepts of centering a flex container using justify-content:center and align-items: center, I am facing an alignment issue with my box. Can anyone help me with this? This is what I have attempted so far: <template> <di ...

javascripthtmlcssvue.jsflexbox

Issue with flex item not expanding to fill entire height within flex container

My markup contains the following code: .container { display: flex; width: 500px; } .col1 { background: red; height: 100%; width: 50px; } .col2 { background: blue; flex: 1; height: 200px; } <div class="container"> <div class= ...

cssflexbox

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

javascriptjqueryhtmlcss

Unexpected CSS counter reset issue encountered within nested elements

Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters. Below is a snippet of the code that demonstra ...

htmlcss

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

javascriptjqueryhtmlcss

Is there a way for rainyday.js to utilize a CSS background image as its background?

I have a simple website with a fixed, full-sized background set using CSS. I am trying to incorporate rainyday.js to create a rain effect over the entire site, including the text. Currently, I am only able to get rainyday.js to display rain over a small s ...

javascriptjqueryhtmlcss

Customizing the input field to have a width of 100%

Could someone provide a solution, like a link or working example, for creating input fields with rounded corners that have a width of 100% and a customizable right border? Here is the current structure I am using: <span class="rounded left-corner" ...

htmlcssinputwidthrounding

Secondary navigation bar remains hidden

I am facing an issue with the sub menu bar on this website. I am using the Constellation theme for WordPress and have attempted to adjust margins in order to make it visible, but so far I have been unsuccessful. The sub menu is meant to be responsive, yet ...

wordpresscss

a single column with a div of varying height using flexbox

I need to create a div with a height of 120px using only the CSS property display: flex. I am not allowed to use float and can only use div elements. Here is the code I have so far, but I'm unsure how to achieve the desired outcome: .flex-containe ...

htmlcssflexboxdisplay

Simple HTML/CSS text blocks positioned beside images in a list format

I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right. I've experimented with float: left and various display propertie ...

htmlcss

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

I am currently developing a basic TODO application. Within my index.html file, I have a main div with the id #app. Inside this div, there is another div with the class .todobox where I intend to display different tasks stored in my main.js file. Each task ...

javascriptcssvue.jsvuejs2vue-component

Safari-exclusive bug: jQuery offset() function malfunctioning and producing highly inaccurate results

My goal is to retrieve the top offset values of a series of elements on my webpage. I am cycling through each element and recording its top offset value like this: $(elements).each(function() { var element = $(this); var offset = Math.floor($(elem ...

jquerycsssafaripositionoffset

What is causing an empty box to appear due to padding? Is there a way to conceal it

There seems to be an issue with adding padding to the results id div box. The padding is causing a blank yellow box to appear at the bottom before any results are submitted. I've tried to hide this box without success by adding a displayResult() funct ...

javascripthtmlcss

The Bootstrap image fails to adhere to the size of its parent flex container

I am having trouble positioning an image, heading, and a button on top of another image. The issue arises when viewing the content on small screens as the smaller image fails to resize properly and extends beyond the background of the larger holding imag ...

htmlcssbootstrap-4flexboxbootstrap-5

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

jqueryhtmlcss

Setting the width of an image within an iframe: A step-by-step guide

Is there a way to adjust the width of an image within an iframe? Typically, if an image with high resolution is placed inside an iframe, the iframe becomes scrollable by default. ...

javascriptjqueryhtmlcss

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

cssreactjswebpackimportbabeljs

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

I am encountering an issue with my iframe border when using CSS. The problem arises in Chrome where the border disappears upon resizing the page, while Safari changes the size (Firefox appears unaffected) https://i.sstatic.net/ZUi9z.gif Are there any kno ...

htmlcssgoogle-chromeiframesafari