Adding an SVG Element and also making it responsive

Admin 1
Viewed 215

I was not able to add an SVG wave type picture to my background AND also make it responsive at the same time. I am trying to add the wave to a pre-existing background image of mine to make it look more appealing. While I was successful in adding one, I soon realized that if I zoomed in on the website, my latest addition acts very funky. Could anyone please share some ideas/code to help me out here?

What I have already tried

I did do my research before posting this. I checked out previous questions posted on Stackoverflow and tried to replicate the ideas provided but found no success. This is justified in the code I have posted below.

Following is a snippet of my code.

HTML

This is the section of my code that I am trying to play with.

<section class="site-title">
            <div class="site-background">
                <h1>Who Am I?</h1>

                <h2>I am a 
                <span class="txt-type" data-wait = "5000" data-words = '["example", "example"]'></span>
            </h2>

            <div class = "svg">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="#ffffff" fill-opacity="1" d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>
            </div>
</section>

        <!-- Site title.-->


        <!-- Blog posts Carousel. -->
        <section class = "space">
            <div class = "empty"></div>
        </section>

CSS

/* Site Title */

main .site-title{
    background: url(../assets/Wallpaper-2.jpg);
    background-size: cover;
    height: 110vh;
    display: flex;
    justify-content: center;
}

main .site-title .svg{
    padding-top: 144px;
    width: 100%;

}

main .site-title .site-background{
    padding-top: 10rem;
    text-align: center;
    color: white;
    padding-top: 24px;
}

html,body{
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
responsive-design svg css html
1 Answers

It will be easier if you consider the SVG as background:

.site-title {
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto,
    url(https://picsum.photos/id/10/800/800) center/cover;
  background-repeat:no-repeat;
  height: 90vh;
  display: flex;
  justify-content: center;
}

.site-title .site-background {
  padding-top: 10rem;
  text-align: center;
  color: white;
  padding-top: 24px;
}
<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>

    <h2>I am a
      <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span>
    </h2>
  </div>
</section>

You can also consider it as mask and you will have transparency:

.site-title {
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto no-repeat,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
          mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto no-repeat,
    linear-gradient(#fff,#fff);
          mask-composite:exclude;
  height: 90vh;
  display: flex;
  justify-content: center;
}

.site-title .site-background {
  padding-top: 10rem;
  text-align: center;
  color: white;
  padding-top: 24px;
}

body {
  background:pink;
}
<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>

    <h2>I am a
      <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span>
    </h2>
  </div>
</section>

user_86203330
Related