SVG Element fill whole screen and always flll display

Help
,
1

Hi, so how in the HECK do you make a svg element cover the full screen and scale to the full size? (like making it always scale the image so the bottomleft of the image is at the bottom left of your screen, and same for the top left)? I’ve been trying a mix of viewbox forcing and setting the w/h to 100%, but it not working

2

Could you share your code please?

3 
<html>
        <head>
<style>
        #background { height: 100%; width: 100% }
</style>
        </head>
        <body>
                <svg id="background" xmlns="http://www.w3.org/2000/svg"
                  viewvbox="0 0 800 450" preserveAspectRatio="none">
                        <circle cx="50" cy="50" r="50" fill="yellow"></circle>
                        <polygon points="800,0, 0,450, 200,450" style="fill:lime"></polygon>
                </svg>
        </body>
</html>```
4

So, everything is correct except for a typo: viewvbox => viewBox. Fixing that allows it to fill the screen properly. You might want to change preserveAspectRatio as well so that it doesn’t stretch.

1 Like
5

My site uses an SVG as a background image.

This is the CSS rule:

html {
    background: url("blog-bg-dither-green-opt.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

background-size: cover: scales the image (while preserving its ratio) to the smallest possible size to fill the container.

6

…of course it was a typo

Fair, I did that more for debugging. I AM going to leave it on YMax, though