I am trying to fit an svg as background into an element that is about 80% width of screen size.
The final result should look like this:
The svg effect won’t come up at 80% width but when I reduce the width it works but breaks in two.
I need it to come up at 80% width right at the bottom of the element.
Please, I am new to CSS.
<div>
<h1>SVG in the background</h1>
<p>Lorem and Hip Hip Hip Lorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip Hip</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%;
}
>Solution :
You can position your background to the bottom and then center.
This will push the svg to the desired position.
See the change to your code below
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) bottom center;
background-size: 100%;
}<div>
<h1>SVG in the background</h1>
<p>Lorem and Hip Hip Hip Lorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip Hip</p>
</a>