I did not manage to get the bubbles on the background. I tried to do it 2 different ways.
img elements using position: absolute in the main element, this was not a success since they created a overflow on the web page.::before and ::after this way it could not manage to get the position right.I had the same problem with the bubbles in the background, I pretty much did the same thing as you did and had the same problem. So, I just searched for others who had completed the task and copied their observed what they did. Hope this helps.
body { background-color: #19A2AF; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 50vw bottom 40vh, left 50vw top 44vh; }
