Jump to content

Placing image inside the SVG container

Recommended Posts

 

I'm looking for help to insert an image into a white SVG container.

I want the SVG to be resizable based on width and height, without stretching the image. Once the image is "inside" the SVG, I should be able to see the blue background.

 

Below is my current code.


    <style>
        .svg-container{
            background-image: url( 'https://dummyimage.com/1080x1920/000/fff.png' );
            background-size:cover;
            background-position: center;
}

    </style>
    <div class="parent" style="height: 500px; display: flex;">
        <div class="clild1" style="width: 50%; height: 100%; background-color: bisque;">
        </div>
        <div class="child2"  style="width: 50%; height: 100%; background-color: blue;">
            <div class="svg-container" style="width: 100%; height: 100%;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.967 906.027" style="width: 100%; height: 100%;" preserveAspectRatio="none">
                    
                    <!-- SVG content -->
                    <g id="DSC_5358-Edit" transform="translate(-0.033 23.834)" fill="white">
                        <path d="M.033,84.049,512-23.834V882.192L.033,696.119Z" stroke="none"/>
                        <path d="M 507.0001220703125 -17.6710205078125 L 5.0333251953125 88.10479736328125 L 5.0333251953125 692.6162719726562 L 507.0001220703125 875.0551147460938 L 507.0001220703125 -17.6710205078125 M 512.0001220703125 -23.83447265625 L 512.0001220703125 882.1923828125 L 0.0333251953125 696.1190795898438 L 0.0333251953125 84.048583984375 L 512.0001220703125 -23.83447265625 Z" stroke="none" fill="#6e6e6e"/>
                    </g>
                </svg>
            </div>
        </div>
    </div>

 

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 3/5/2024 at 5:09 PM, tuanphan said:

Can you share link to page where you added the code? We can test/adjust it easier

Updated 

I managed to solve the issue of placing the image in the SVG however I'm encountering an issue with fitting the SVG to the full height of its container. Presently, it appears too large and gets cut off. I attempted to use preserveAspectRatio(xMidYMid meet), but it doesn't stretch to fill the container. Any suggestions on how to resolve this?

 

This is the link to the website: 
https://cyan-rhombus-xz7h.squarespace.com 
Password: 1234image.thumb.png.5144b323d89f54630a496c39283a6991.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.