Create Parallax Background Using Snap.svg - html

Question

I have created an svg using snapsvg. I intend to use this svg as part of a parallax background. Is my approach to using snapsvg as a parallax background correct?
var s = Snap("#svgout");
s.attr({
viewBox: "0 0 600 100"
});
//lets draw 2 rects at position 100,100 and then reposition them
var r = s.rect(100, 100, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(10, 10, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(200, 10, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(300, 100, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
var r = s.rect(400, 10, 100, 100, 20, 20).attr({
stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});
#svgout {
width: 100%;
}
#about {
min-height: 200px;
height: 200px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#about svg {
height: 200px;
position: absolute;
text-align: center;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<header style="height:100px; background:#000">
<div>header content</div>
</header>
<section data-type="background" id="about">
<svg id="svgout"></svg>
content to add within the parrallax
</section>
<section style="height:400px ; background:#f1c40f">
<div>main content</div>
</section>
working fiddle