Question -- Responsive SVG with Background Image?

HTML & CSS
1

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.

You can see my example here: http://codepen.io/wapope/pen/BLojPy

Is there a better way of doing this, or something I’m missing?

Thanks for the help.

2

Hi @wapope and welcome to SitePoint Forums.

Online Demo

index.html

<!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>&nbsp;</p>
<h3><b>file: </b> wave.svg </h3>
<pre class="w88 mga bdr">  
    &lt;svg viewBox="0 0 1000 100" class="bge"&gt;
      &lt;path d="
       M -10,   75 
       C 500,  125 
         500,   00 
        1000,  100" 
       stroke="blue" stroke-width="50" fill="transparent" 
      /&gt;    
      &lt;rect x="0" y="80" width="1000" height="50" fill="blue" /&gt; 
    &lt;/svg&gt;
  </pre>
<p>&nbsp;</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>&nbsp;</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>&nbsp;</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>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.