CODEWITHSUNDEEP
htmlcsssvg
J P
J P

Reputation: 422

svg as a background html

I am trying to put an svg as background, but it doest adapt to the container.

could you please give a hand with that

thank you

enter image description here

    <div class="section" style="position: relative;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum reprehenderit ipsum quo harum facilis voluptates porro tempora dolore mollitia nisi veniam, incidunt optio velit in facere nemo. Placeat blanditiis, ad distinctio asperiores quod ratione dicta modi. Explicabo eligendi odit necessitatibus ullam magni, illum dolores et magnam tenetur numquam facilis cum commodi fuga accusantium molestiae possimus? Praesentium, iste deserunt! Sapiente, sunt quas. Ipsa fugiat quaerat aliquid voluptates, expedita necessitatibus? Dolorum a tempore ratione? Ipsum reprehenderit nihil eveniet aliquid quibusdam pariatur nesciunt. Nam veritatis voluptates voluptatem deleniti iste pariatur ratione, sequi laborum temporibus minus non dicta ab tempore reiciendis sunt consequatur nemo, quisquam error ullam? Necessitatibus dolor ducimus culpa atque, doloribus enim. Eveniet repudiandae temporibus, autem rerum dolor, eius quod quaerat neque sapiente doloribus dolore ipsam veniam dolores fugiat? Nesciunt explicabo nemo commodi porro, obcaecati quisquam quis autem deserunt vero quia quidem maxime nostrum rerum amet, nam excepturi architecto odio ut, facilis aliquid aperiam et odit corporis. </p>
        <svg viewBox="0 0 100 100" style="position:absolute; top:0; z-index: -100;">
            <polygon fill="red" points="0,20 100,0 100,80 0,100"/>
        </svg>
   </div>

Upvotes: 0

Views: 57

Answers (1)

Maria Vit&#243;ria
Maria Vit&#243;ria

Reputation: 26

you have to set svg as background using css.

you can use svg like a image in a folder:

.element {
    background-image: url(/images/image.svg);
}

or use directly on css:

.element {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='red' points='0,20 100,0 100,80 0,100'/%3E%3C/svg%3E");
}

using svg encoder https://yoksel.github.io/url-encoder/

Upvotes: 1

Related Questions