CODEWITHSUNDEEP
csssvg
klaurtar1
klaurtar1

Reputation: 778

Hiding background image partially with SVG

I am new to using SVG's. I have created a wavy svg that I would like to sit over the top of an image to give it a wavy look something similar to the image I have included.

However, my issue with my current code is that there is a huge amount of white space that I assume comes from the SVG that will not allow me to properly align my background image with the SVG. How can I fix this?

*::before, *, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

.background-image {
  background-image: url('https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80');
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,50 C150,150 300,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:grey;"></path>
  </svg>
</div>
<div class="background-image"></div>

sample image

Upvotes: 0

Views: 656

Answers (2)

johannchopin
johannchopin

Reputation: 14844

You can just move the .background-image inside the .container div:

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,50 C150,150 300,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:grey;"></path>
  </svg>
  <div class="background-image"></div>
</div>


*::before,
*,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.container {
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
}

.background-image {
  background-image: url('https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80');
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,50 C150,150 300,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:grey;"></path>
  </svg>
  <div class="background-image"></div>
</div>

Upvotes: 1

Pete
Pete

Reputation: 58432

Why not just put the svg inside the background image div, the white space in your original example comes from the padding bottom you add to your container div

*::before,
*,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.background-image {
  position: relative;
  background-image: url('https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80');
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
<div class="background-image">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,50 C150,150 300,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:grey;"></path>
  </svg>
</div>

Upvotes: 1

Related Questions