Html Question posted in
Some basic documentation can be found here.

Html – How to blend DIV background in a smooth way from one to another. Fade Out/Fade in

I have a simple page with multiple <section>s. Each has a slightly different background. The transition from one <section> to another is quite harsh on the eyes:

enter image description here

Is there a way to have a blend between the two backgrounds? Like one fading out while the other fade-in and potentially control over how many px the blend happens over?

Full example here:

.sectionA {
  height: 200px;
  min-width: 100vw;
  background-image: url("https://media.istockphoto.com/id/1423098321/vector/dark-purple-edge-glow-modern-gradient-abstract-blend-background.jpg?s=612x612&w=0&k=20&c=FpuUIzzyi8ryd3lXnArlafHYM_Bip5otkOJAa7T4hg4=");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.sectionB {
  height: 200px;
  min-width: 100vw;
  background-image: url("https://media.istockphoto.com/id/1434782845/vector/purple-light-defocused-blurred-motion-gradient-abstract-background-vector.jpg?s=612x612&w=0&k=20&c=XdziynSGjaoVCLk9LI1A70ibGgpUi2IZ23PtkOWdjOM=");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
<div class="sectionA"></div>
<div class="sectionB"></div>
Tags:

2

Answers


  1. 0

    You can use css background-blend-mode if you make them background images on one div. You could also consider making one image and lay it across a div that is behind these two sections. There is no way with css to detect the other image and blend them together.

    Login or Signup to reply.
  2. 0

    Yes, this can be done using a gradient mask. The technique will be to create an overlap between the two divs, then apply a gradient mask to the front image in the region of overlap. This diagram and the first snippet gives an overview of the solution.

    enter image description here

    body {
  margin: 4em 1em 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}

.sectionA, .sectionB {
  height: 225px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  display: flex;
  justify-content: center;
  align-items: center;
}

.d1 .sectionA, .d1 .sectionB {
  height: 200px;
}

.d2 .sectionA, .d3 .sectionA {
  margin-bottom: 25px;
}

.sectionA {
  background: blue;
}

.sectionB {
  background: red;
}

.d3 .sectionB, .d4 .sectionB {
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0px, rgb(0 0 0 / 1) 50px);
}

.d4 .sectionB {
  position: relative;
  top: -50px;
}
    <div class="d1">
  <div class="sectionA">200</div>
  <div class="sectionB">200</div>
</div>

<div class="d2">
  <div class="sectionA">225</div>
  <div class="sectionB">225</div>
</div>

<div class="d3">
  <div class="sectionA">225</div>
  <div class="sectionB">225</div>
</div>

<div class="d4">
  <div class="sectionA">225</div>
  <div class="sectionB">225</div>
</div>

    Let’s go through it step by step with your background images. Your sections are each 200px in height. To create an area of overlap 50px high, we first increase the height of each section to 225px. I have also added a margin between them.

    body {
  margin: 0;
}

.sectionA, .sectionB {
  height: 225px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.sectionA {
  background-image: url("https://media.istockphoto.com/id/1423098321/vector/dark-purple-edge-glow-modern-gradient-abstract-blend-background.jpg?s=612x612&w=0&k=20&c=FpuUIzzyi8ryd3lXnArlafHYM_Bip5otkOJAa7T4hg4=");
  margin-bottom: 25px;
}

.sectionB {
  background-image: url("https://media.istockphoto.com/id/1434782845/vector/purple-light-defocused-blurred-motion-gradient-abstract-background-vector.jpg?s=612x612&w=0&k=20&c=XdziynSGjaoVCLk9LI1A70ibGgpUi2IZ23PtkOWdjOM=");
}
    <div class="sectionA"></div>
<div class="sectionB"></div>

    Then we add a mask to the front (second) image. We want the mask to consist of a linear gradient which is transparent at the top edge and black 50px from the top edge.

    linear-gradient(to bottom, rgb(0 0 0 / 0) 0px, rgb(0 0 0 / 1) 50px)

    body {
  margin: 0;
}

.sectionA, .sectionB {
  height: 225px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.sectionA {
  background-image: url("https://media.istockphoto.com/id/1423098321/vector/dark-purple-edge-glow-modern-gradient-abstract-blend-background.jpg?s=612x612&w=0&k=20&c=FpuUIzzyi8ryd3lXnArlafHYM_Bip5otkOJAa7T4hg4=");
  margin-bottom: 25px;
}

.sectionB {
  background-image: url("https://media.istockphoto.com/id/1434782845/vector/purple-light-defocused-blurred-motion-gradient-abstract-background-vector.jpg?s=612x612&w=0&k=20&c=XdziynSGjaoVCLk9LI1A70ibGgpUi2IZ23PtkOWdjOM=");
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0px, rgb(0 0 0 / 1) 50px);
}
    <div class="sectionA"></div>
<div class="sectionB"></div>

    Finally, we remove the margin between the images, which brings them together, then we overlap them by 50px using relative positioning.

    body {
  margin: 0;
}

.sectionA, .sectionB {
  height: 225px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.sectionA {
  background-image: url("https://media.istockphoto.com/id/1423098321/vector/dark-purple-edge-glow-modern-gradient-abstract-blend-background.jpg?s=612x612&w=0&k=20&c=FpuUIzzyi8ryd3lXnArlafHYM_Bip5otkOJAa7T4hg4=");
}

.sectionB {
  background-image: url("https://media.istockphoto.com/id/1434782845/vector/purple-light-defocused-blurred-motion-gradient-abstract-background-vector.jpg?s=612x612&w=0&k=20&c=XdziynSGjaoVCLk9LI1A70ibGgpUi2IZ23PtkOWdjOM=");
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0px, rgb(0 0 0 / 1) 50px);
  position: relative;
  top: -50px;
}
    <div class="sectionA"></div>
<div class="sectionB"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search