Placing a gradient background in front of two divs

I have created two divs with gradients:

.container_middle_page{
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container_middle_page_up{
    background-image: linear-gradient(to top, #F28118,white);
    height: 50%;
    display: flex;
    justify-content: flex-end;
}

.container_middle_page_down{
    display: flex;
    justify-content: flex-end;
    background-image: linear-gradient(to bottom, #F28118,white);
    height: 50%;
}
<div class="container_middle_page">
  <div class="container_middle_page_up">Div1</div>
  <div class="container_middle_page_down">Div2</div>
</div>

Now I want to add a background image that is visible in front of both divs with gradients. If I try something like:

background-image: url("/path") no-repeat, linear-gradient(to bottom, #F28118,white);

I am only able to set the background for one of the two divs. How can I set the background for both divs?

htmlcssbackgroundgradient

Answer №1

Below you will find the resolution:

.container_middle_page_up{
    background-image: url("/path"), linear-gradient(to top, #F28118,white);
    height: 50%;
    display: flex;
    justify-content: flex-end;
}

.container_middle_page_down{
    display: flex;
    justify-content: flex-end;
    background-image: url("/path"), linear-gradient(to bottom, #F28118,white);
    height: 50%;
}

It was necessary for me to include the image in both container elements.

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

Problem with IE off-canvas scrolling

Currently, I am facing an issue with the scrolling functionality of an off-canvas sidebar on my Joomla 3 website. It seems to be working fine in Chrome and Firefox, but when it comes to Internet Explorer, the visible scroll bar refuses to move when attempt ...

javascripthtmlcssjoomla

Tips on dynamically looping the formcontrolname and implementing validation strategies

Looking for a way to validate multiple looping of dynamic formControlName="xxx" in select field. Check out my HTML code: <ul *ngFor="let detaillist of stressli.stresstabdetails;"> <li> <div class="form-container"> ...

htmlangulartypescriptangular7

What is the best way to save newly added elements on a webpage that were submitted by the

I am looking for a way to save the changes made by users on my webpage so that they can navigate to different pages and come back without losing any added elements. These changes should be retained even when the user goes back to edit the webpage, but I pr ...

javascriptjqueryhtmllocal-storage

What is the strategy used by jQuery to select elements by class name?

Is there a "getElementsByClass" function in JavaScript? If not, how does jQuery manage to do it without looping through all elements which would be very inefficient? Also, how can I specify CSS for elements with two or more classes? <a class="one two ...

jquerycssdom

ensure that angular's ng-if directive sets aside space to display content when triggered by an event

I'm facing an issue with my modal form setup where if a text-field is left blank, a label saying "it is required" is generated below the field, causing the "Proceed" button to move (along with all other elements below it). How can I make sure that DOM ...

javascriptjquerycssangularjs

Tips for aligning a div containing an image in the center of another div

Trying to perfectly center an image inside a div both vertically and horizontally using the display inline-block property. HTML <div class="center-wrapper"> <div class="image-holder"> <img src="picture.jpeg" alt="Centered Image"> ...

htmlcss

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

htmlcsstwitter-bootstrap

JavaScript Birthday Verification: Regular Expression Pattern

I am currently testing out JavaScript form validation. The information provided is not being sent to any database, it's just for format testing purposes. All the regex checks are functioning correctly apart from birth. It seems like there may be an i ...

javascripthtmlcssregex

React createElement function does not include string children when there are multiple children present within the inner HTML

Currently, I am utilizing React.createElement(...) to dynamically produce a basic react website using data from a JSON file. The JSON file consists of an array of JSON objects that represent elements and their respective children. An individual element&ap ...

cssreactjs

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui

Display the Image Element in Angular only when the image actually exists

In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...

javascripthtmlangularjsimage

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

Maintain parent hover effect while child is being hovered over

After exploring various solutions to fix an issue, I've hit a roadblock. Adding CSS and jQuery code seemed promising at first, but upon refreshing the browser, a new problem emerged. The parent element retained its hover state background color, but th ...

jqueryhtmlcsshoverparent-child

What could be the reason behind React's decision to not convert JSX to an HTML component and instead return [object Object]?

Please locate the specified console log within the code snippet provided below. This particular console log outputs a string value, indicating that an object is not being passed in this instance. However, despite this, React fails to recognize the JSX an ...

htmljsonreactjsdomjsx

Activate the function for items that are overlapping

Here is a scenario I am working on: HTML <body> <div> <p>Text</p> </div> <body> JQuery $('div').click(function(){ $(this).find('p').fadeToggle('fast'); }); $('bo ...

javascriptjqueryhtmloverlap

To emphasize code in an HTML document, you can use the <font color="#xxx"> tag

Can anyone guide me on how to add color highlights to my HTML code in this way? <font color="#1773cc">#include </font><font color="#4a6f8b">&lt;NTL/ZZ.h&gt;</font><br> <br> <font color=&quo ...

htmlhighlight

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

javascriptcssvue.jsimportnuxt.js

Is it possible to assign a Bootstrap class as a variable in a custom CSS declaration?

While trying to make my website responsive, I planned on using media queries to adjust text size and other elements. The issue arises because I rely on bootstrap for setting text sizes. Is there a way to apply bootstrap classes in my CSS file? For instanc ...

cssbootstrap-5

Aligning CSS border headers in a slanted or rotated table cell format

Is there a way to create slanted or rotated table headers in HTML? How can I ensure that the slanted inner-side header border aligns perfectly with the vertical border of the table cell element? Here is an example of the HTML code: <table> < ...

htmlcss

Animating with JavaScript

I have a members button on my website that triggers a dropdown animation when clicked. However, the issue is that the animation occurs every time a page is loaded, even if the button is not clicked. I want the dropdown to only open when the button is click ...

javascriptjqueryhtmlanimation