2: Building the background

After deciding to make this Shake 8 Ball site, I created a few concepts in Figma to get an idea of how it would look and function. I ended up choosing my design of a circular background to compliment the shape of the 8 ball that would be in the center of the screen.

I chose a colour palette that I felt would suit the concept, and then created the circular background in Figma, along with some magical stars that would create a mystical aesthetic to the background. I exported this as a single SVG so it would be scalable depending on the screen size of the device viewing the site without any resolution degradation.

Background Display

First things first, we need to make sure that any positioning that we do to the images will work correctly. So in order to do this, I set the position to be absolute along with it to fill the viewport correctly depending on the device screen size for the wrapper of any images that will be centered.

                                
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: absolute;
                            

In order to center the images including the background in the Landing page, I centered these using the following CSS:

                                
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
                            

After this, to stop everything from being too circular and to give a better aesthetic, I cut off the top and bottom of the background circles by creating the height to be larger than the viewport and any overflow to be cut off to stop scrolling down the page.

                                
    min-height: 120vh;
    z-index: 1;
                            

This ended up resulting in the background centering as shown below: