Lay text over top SVG image and a bottom gradient

Question

I want to have a background made of a SVG plus a gradient div for a box with dynamic content.

This is my goal:

The idea is to have some sort of one-color complex SVG at top and then a gradient below it, like this:

My first idea was to just use a single svg that includes the gradient color background, but the problem is, is that the height would not match the dynamic content. I would run into those issues:

My next idea, was to put the gradient color background inside a div with SVG as background, like this:

.box {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23000b76' fill-opacity='1' d='M0,64L8.9,96C17.8,128,36,192,53,202.7C71.1,213,89,171,107,160C124.4,149,142,171,160,165.3C177.8,160,196,128,213,96C231.1,64,249,32,267,42.7C284.4,53,302,107,320,117.3C337.8,128,356,96,373,101.3C391.1,107,409,149,427,138.7C444.4,128,462,64,480,80C497.8,96,516,192,533,197.3C551.1,203,569,117,587,90.7C604.4,64,622,96,640,128C657.8,160,676,192,693,192C711.1,192,729,160,747,128C764.4,96,782,64,800,58.7C817.8,53,836,75,853,69.3C871.1,64,889,32,907,64C924.4,96,942,192,960,229.3C977.8,267,996,245,1013,245.3C1031.1,245,1049,267,1067,282.7C1084.4,299,1102,309,1120,288C1137.8,267,1156,213,1173,186.7C1191.1,160,1209,160,1227,149.3C1244.4,139,1262,117,1280,128C1297.8,139,1316,181,1333,186.7C1351.1,192,1369,160,1387,149.3C1404.4,139,1422,149,1431,154.7L1440,160L1440,320L1431.1,320C1422.2,320,1404,320,1387,320C1368.9,320,1351,320,1333,320C1315.6,320,1298,320,1280,320C1262.2,320,1244,320,1227,320C1208.9,320,1191,320,1173,320C1155.6,320,1138,320,1120,320C1102.2,320,1084,320,1067,320C1048.9,320,1031,320,1013,320C995.6,320,978,320,960,320C942.2,320,924,320,907,320C888.9,320,871,320,853,320C835.6,320,818,320,800,320C782.2,320,764,320,747,320C728.9,320,711,320,693,320C675.6,320,658,320,640,320C622.2,320,604,320,587,320C568.9,320,551,320,533,320C515.6,320,498,320,480,320C462.2,320,444,320,427,320C408.9,320,391,320,373,320C355.6,320,338,320,320,320C302.2,320,284,320,267,320C248.9,320,231,320,213,320C195.6,320,178,320,160,320C142.2,320,124,320,107,320C88.9,320,71,320,53,320C35.6,320,18,320,9,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100%;
  padding-top: 150px;
}

.gradient-box {
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(73, 79, 121, 1) 16%, rgba(0, 11, 118, 1) 100%);
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 100px;
  color: white;
  padding-top: 30px
}

<div class="box">

  <div class="gradient-box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac arcu quis ipsum ornare dapibus eu quis turpis. Donec non dolor sit amet turpis vulputate sagittis id at felis. Vestibulum porta vulputate odio, ut mollis diam convallis vel. Praesent massa
    risus, ullamcorper ut lacus quis, vehicula ullamcorper turpis. Suspendisse condimentum urna sit amet lorem tempus, sit amet sagittis orci semper. Sed posuere urna risus, vel faucibus justo lacinia ut. Morbi bibendum placerat laoreet. Etiam sit amet
    ultrices quam. Praesent pellentesque maximus tempus. Aenean lobortis vulputate sem, eget scelerisque turpis vehicula a. In lorem tellus, iaculis et pharetra et, lacinia ultricies nisl. Maecenas eu congue elit. Aenean placerat neque vel augue tempor,
    eu auctor ipsum tempor. Mauris interdum vestibulum sapien in condimentum. Duis bibendum est nec lorem ultrices, vel malesuada risus dapibus. Donec in eros massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut auctor, sapien nec consequat
    scelerisque, velit tortor iaculis velit, sed ullamcorper urna odio ut orci. Nunc pellentesque consectetur tristique. Suspendisse turpis dui, iaculis eget justo at, accumsan suscipit felis.


  </div>
</div>

But there are two major problems with this approach. First, I need a fixed padding-top for the gradient to match the svg, but its height is dynamic (according to width of image). Also, the test starts below the svg, and I would like to start it above the SVG image.

Any idea how I can put dynamic content above a background that is made up of a top SVG image and a bottem gradient bg?

Answer 1

So I managed to do it like this:

• Put SVG as svg tag above gradient box
• Start the gradient after 100px height
• Move the box to the top by 100px through negative top-margin

100px can be replaced by any value. Its dynamic in the sense, that the gradient box will adjust to the content. The negative top-margin is static and may needs media query adjustment.

.box {
  height:300px;
  background-color:#00cba9;
margin:0;
margin-top:-100px;

background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,192,203,1) 16%, rgba(0,203,169,1) calc(100% - 100px), rgba(255,255,255, 0) calc(100% - 99px), rgba(255,255,255,0) 100%);
   color:yellow;
   
  
}

svg{
  padding-bottom:0;
  margin-bottom:0;
}

.wrapper{
  display:flex;
  flex-direction: column;
}

<div class="wrapper">

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#00cba9" fill-opacity="1" d="M0,32L46.5,256L92.9,288L139.4,192L185.8,192L232.3,192L278.7,192L325.2,64L371.6,128L418.1,64L464.5,288L511,160L557.4,128L603.9,128L650.3,32L696.8,160L743.2,0L789.7,0L836.1,64L882.6,96L929,64L975.5,64L1021.9,32L1068.4,224L1114.8,160L1161.3,96L1207.7,224L1254.2,64L1300.6,128L1347.1,160L1393.5,0L1440,320L1440,320L1393.5,320L1347.1,320L1300.6,320L1254.2,320L1207.7,320L1161.3,320L1114.8,320L1068.4,320L1021.9,320L975.5,320L929,320L882.6,320L836.1,320L789.7,320L743.2,320L696.8,320L650.3,320L603.9,320L557.4,320L511,320L464.5,320L418.1,320L371.6,320L325.2,320L278.7,320L232.3,320L185.8,320L139.4,320L92.9,320L46.5,320L0,320Z"></path></svg>
<div class="box">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel dui nisl. Curabitur tincidunt felis ac erat rutrum egestas quis eu lorem. Fusce ornare consequat justo vel lobortis. Vestibulum a convallis mauris. Morbi interdum massa ac lacus convallis, nec suscipit libero mattis. Donec posuere laoreet quam nec dignissim. Sed nec augue blandit, ullamcorper sem et, congue lectus.

Nulla iaculis odio et massa vestibulum, vel malesuada arcu volutpat. Duis efficitur sapien a ultrices consectetur. Pellentesque urna tellus, iaculis ac lorem eu, commodo ultrices augue. Curabitur feugiat tincidunt risus, eget sodales lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi imperdiet augue sit amet lorem ullamcorper facilisis. Cras pretium dui in velit ullamcorper dictum. Mauris nec dui efficitur, ullamcorper nunc vel, elementum erat. Pellentesque sodales arcu turpis, eu porttitor tellus imperdiet in. Cras a nibh vel eros finibus consequat. Nam molestie felis urna, at sagittis ante faucibus ac. Nam ut odio malesuada, lacinia magna quis, consequat dui.

Morbi sed tincidunt turpis, eget tincidunt nisl. Donec accumsan pretium ornare. Morbi eget accumsan urna, vitae varius nisl. Proin blandit, est ut elementum rhoncus, enim turpis laoreet felis, sed rutrum ligula risus non eros. In sit amet libero eget nibh finibus mollis. Vestibulum ultrices leo sed lorem lacinia, a cursus magna pulvinar. Ut volutpat ac turpis sed faucibus. Fusce sit amet metus diam. Quisque finibus ac metus nec suscipit. Curabitur vitae enim eget urna sagittis scelerisque eget non felis.   
</div>
</div>