I really struggled with the positioning of the 2 background semi-transparent spheres. I ended up using pseudo-elements (and learned a lot in the process!) but would be happy to learn if there is a better solution to setting these background spheres.
Boa noite, no meu projeto eu utilizei o backgroud-position, é só colocar a % negativa que a imagem sai do viewport.
Na minha solução usei esse código:
body{
background-color: hsl(185, 75%, 39%);
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
background-size: 600px 600px, 600px 600px;
background-repeat: no-repeat, no-repeat;
background-position: -100% 150%, 150% -100%;
}
Nas tags tem uma virgula para associar as caracteristicas a segunda imagem de fundo.