Curved background image

by Sascha

HTML

<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>

<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>

<div class="content"><h1>
Some facts about us.
</h1>
<ul>
<li>Fact 1</li>
<li>Fact 2</li>
<li>Fact 3</li>
<li>Fact 4</li>
</ul>
</div>
</section>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 110%;
}
section {
    margin: 60px 0;
    position: relative;
    height: 400px;
    position: relative;
}
#statistics {
  background: url(https://www.klaviyo.com/wp-content/uploads/2016/09/abstract-background-1024x273.jpg);
  background-size: cover; 
  background-attachment: fixed;
  background-position: center;
}
#bigHalfCircleCandyBottom {
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  left: 0;
}
section .content {
  width: 400px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -100px;
}
section .content ul {
  padding: 10px;
  margin: 0;
  list-style: none;
}
section .content ul li {
  float: left;
  margin: 20px;
}