Hey guys, I’m trying to get something to work that looks like this: https://i.imgsafe.org/6efee591b9.png . Easy enough, I know, but it also has to be responsive and be able to be used over image backgrounds.
I have tried using masks and svgs with patterns, but it isn’t working. The pattern for the top SVG shape will size responsively with the SVG “wave”, making it look different than the text-box background-image.
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
<title> Responsive SVG with Background Image </title>
<style type="text/css">.bdr{outline:dotted 1px #ccc;}.bgs{background-color:snow;}.bge{background-color:#eee;}.bgb{background-color:blue;}.bg1{width:300px;height:24px;background-color:#E2AB58;color:#000000;}.clb{clear:both;}.cls{color:snow;}.cly{color:yellow;}.mga{margin:0 auto 0;}.mgV{margin:0 auto 18%;}.p42{padding:0.42em;}.poa{position:absolute;top:50%;left:0;}.por{position:relative;}.tac{text-align:center}.vam{vertical-align:middle;}.w21{width:21%;}.w42{width:42%;}.w88{width:88%;}.wave-001{width:100%;height:auto;}</style>
</head>
<body class="bgs">
<div>
<h1> Responsive SVG with Background Image </h1>
<h4> <a href="https://www.sitepoint.com/html5-svg-cubic-curves/"> SitePoint Cublic Bezier Curve </a> </h4>
<h3>The image:</h3>
<div class="w88 mga bdr">
<img src="curve-768x261.png" width="768" height="261" alt="PNG"/>
</div>
<p> </p>
<h3><b>file: </b> wave.svg </h3>
<pre class="w88 mga bdr">
<svg viewBox="0 0 1000 100" class="bge">
<path d="
M -10, 75
C 500, 125
500, 00
1000, 100"
stroke="blue" stroke-width="50" fill="transparent"
/>
<rect x="0" y="80" width="1000" height="50" fill="blue" />
</svg>
</pre>
<p> </p>
<h3>Using wave.svg</h3>
<div class="clb por w88 mgV bdr">
<img class="wave-001" src="wave.svg" alt="w88">
<div class="poa p42 bgb cls">
<b class="cly">1-COLUMN BLUE ACCENT</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>
</div>
<p> </p>
<h3>Using wave.svg</h3>
<div class="clb por w42 mgV bdr">
<img class="wave-001" src="wave.svg" alt="w42">
<div class="poa p42 bgb cls">
<b class="cly">1-COLUMN BLUE ACCENT</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>
</div>
<p> </p>
<h3>Using wave.svg</h3>
<div class="clb por w21 mgV bdr">
<img class="wave-001" src="wave.svg" alt="w21">
<div class="poa p42 bgb cls">
<b class="cly">1-COLUMN BLUE ACCENT</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>
</div>
</div>
</body>
</html>