I need help fitting an svg as a background into an element that is 80% of the screen width.
Here is the desired final result:
The svg effect only works correctly when I reduce the width, but then it breaks in two.
I want the svg to appear at 80% width and at the bottom of the element.
<div>
<h1>SVG in the background</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>
</div>
body {
background: #e18900;
padding: 5%;
}
div{
position: relative;
width: 80%;
padding:5%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/rip.svg) center;
background-size: 100%;
}