How to make a gradient continue in other divs

Question

I would like my gradient to pass on to the next div. Putting one div behind them with the gradient would probably work, but on my website the elements are not exactly next to eachother

.row {
  clear: both;
}

.portrait {
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}

.photo {
  width: 200px;
  height: 150px;
  background-color: blue;
}

.gradient {
  width: 200px;
  height: 50px;
  background-color: green;
}

Codepen: https://codepen.io/chingwai/pen/poEGxBe

To explain my structure:

.portrait = is the container, this is dynamically created based on my database.

.photo = will be a profile photo

.gradient = This is where the gradient should come and continue to the other divs that contain .gradient As you can see .photo will be between the divs, so they are not postioned under eachother.

user_10071576 · Answer

Give all the divs you want to be with the gradient BG:

     background-image: linear-gradient(your choice);
      background-repeat: no-repeat;
      background-attachment: fixed;

.child{
height:120px;
width:120px;
border:solid 2px white;


background-image: linear-gradient(to right,pink,green);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parent{
display:flex;
width: 250px;    
}

EDIT

After your explanations on the comments and post edits. Do this:

.gradient{
  width: 200px;
  height: 50px;
  background-image:linear-gradient(to right, blue, lightblue);
  background-attachment:fixed;
}

How to make a gradient continue in other divs

1 Answers