Ensure to view it at 1680px width for perfect alignment, but resizing the screen may cause alignment issues. Any suggestions on how to resolve this problem?
I am attempting to replicate my design from Dribbble shot.
Snippet of code.
.wrapper {
position: absolute;
top: 50%;
left: 50%;
height: 80%;
width: 80%;
transform: translate(-50%,-50%);
background: #F1F1F1;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
border-radius: 15px;
background-image: url("http://svgur.com/i/3W7.svg");
background-position: 129% 38%;
background-repeat: no-repeat;
background-size: 752px;
}
#section0 {
background-image: url("http://svgur.com/i/3W7.svg");
background-position: 100% 0%;
background-repeat: no-repeat;
background-size: 750px;
}
<section class="wrapper">
<h1>TEST</h1>
</section>
NOTE: Replicating this in a small jsfiddle may be challenging, but it will allow you to view the code.