If you want to create space using an SVG, simply adjust the background-size property to maintain the ratio:
div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size: 50px 100px; /* Adjust size based on pattern */
background-attachment: fixed;
}
body {
margin:0;
}
<div class="background-pattern">
</div>
You can also try different sizes for the background by experimenting with the values:
div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image: url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size: 100px 50px; /* Different size configuration */
background-attachment: fixed;
}
body {
margin:0;
}
<div class="background-pattern">
</div>
To have more control over the spacing, consider using gradients in combination with the pattern:
div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image:
repeating-linear-gradient(to bottom,transparent 0,transparent 50px,#fff89c 50px,#fff89c 100px),
url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size:100% 100%,100px 50px;
background-attachment: fixed;
}
body {
margin:0;
}
<div class="background-pattern">
</div>
For a unique pattern, you can use multiple backgrounds together and position them accordingly:
div.background-pattern {
height: 100vh;
width: 100vw;
background-color: #fff89c;
background-image:
repeating-linear-gradient(to bottom,transparent 0,transparent 50px,#fff89c 50px,#fff89c 100px),
url("https://image.flaticon.com/icons/svg/869/869078.svg"),
url("https://image.flaticon.com/icons/svg/869/869078.svg");
background-repeat: repeat;
background-size:100% 100%,150px 50px, 150px 50px;
background-position:left top,left top, 60px 0;
background-attachment: fixed;
}
body {
margin:0;
}
<div class="background-pattern">
</div>
By combining these techniques, you can achieve complete control over the spacing between patterns.