Apply fixed gradient to child elements

HTML-CSS
1

Hi everyone!
I’m trying to have the child divs have the same gradient background as the parent div. In other words, I want them to be covered with the same gradient as if they were one unit. Is it possible?

I tried background-position: fixed, the child elements are covered just fine BUT the background gradient changes as I scroll the viewport upward/downward!

Edit: so that’s happening because background-position: fixed is relative to the viewport. Is there any way to make relative to the parent element?

Does anyone have a solution, please?

HTML

<div class="container">
  <div class="child">
  </div>
    <div class="child1">
  </div>
    <div class="child2">
  </div>
      <div class="child3">
  </div>
    <div class="child4">
  </div>
</div>

CSS



.container {
  position: relative;
  background-image: linear-gradient(red, yellow);
  width: 600px;
  height: 500px;
  


}

.child1 {
position: absolute;
  height: 100px;
  width: 100px;
border-radius: 50px;
  left: 600px;
  top: 0;
    border: 1px solid black;
  background: inherit;
        background-attachment: fixed; 


}

.child2 {
position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50px;
  left: 600px;
  top: 100px;
  border: 1px solid black;
  background: inherit;
   background-attachment: fixed; 

}

.child3 {
position: absolute;
  height: 100px;
  width: 100px;
  background: inherit;
border-radius: 50px;
  left: 600px;
  top: 200px;
    border: 1px solid black;
          background-attachment: fixed; 



}

.child4 {
position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50px;
  left: 600px;
  top: 300px;
background: inherit;
    border: 1px solid black;
        background-attachment: fixed; 

}

https://codepen.io/younesbourakadi/pen/vwZYBW

2

I don’t really understand what you are going for based on the Codepen. Can you make something more like the actual layout you’re trying to do?

Right now it is the background-attachment property on the child divs that are causing them not to inherit the background.

3

I’m really having a hard time trying to formulate my question - sorry!

My problem is pretty straightforward: I want to make the child divs inherit the same gradient background from the parent (as if they were part of the parent div themselves, not just child divs).
The only way I found was to background-attachment: fixed. But it’s not a solution since this property is relative to the window/viewport, not to the parent div. That’s why the gradient is changing when you scroll up/down.

4

I would need to either see an image, a page example like maybe you have seen this effect someplace you can reference, or some code of the actual layout you are going for (including the scroll). Right now I just don’t understand what you are asking for, sorry.

  1. Are the children going to be outside the parent like they are in the Codepen?

  2. Do you want them to just inherit the color, or act like they are transparent and on top of the parent but actually be outside the parent? So they take the gradient color based on their vertical position.

  3. What exactly is the desired scroll effect?

5

  1. Yes. I’m trying to basically have lots of circles outside a box (I’m trying to draw clouds).

  2. I think so… It’s really hard to formulate!

  3. I want them to keep the same gradient while scrolling. See the image:

    chrome-capture%20(1)
    chrome-capture%20(1)888×366 2.65 MB

Do you notice the circles changing their color while scrolling? I just want them to keep their initial color, the one they have at the top position.

Thank you so much @lasjorg !

6

You say you are trying to draw clouds, can you at least show me what you have so far?

Show me a picture of what you want, and show me some code of what you have so far. Because this box and the circles are really not helping me see the desired effect you are going for.

1 Like
7

The code I posted above and the one I have on CodePen are all I have for now. It doesn’t really matter what I am trying to draw, as the point stays the same, ie. How to make children divs with position: absolute inherit the same gradient from their parent div, the div they are nested in?
Could we have the same gradient background in both a parent div and children divs?
The children divs are nest inside a parent container, even if they are positioned outside of it.

As I showed in the gif and in CodePen, the gradient in the children background is changing as I scroll up and down. The point is to make it fixed, I don’t want it to change with scrolling.

8

That gif looks like some javascript was used there. Like on scroll.

9

No. I made that gif.