UNDERSTANDING PARALLAX

The parallax effect makes the background image move slower than the foreground elements as you scroll through the page, adding an immersive 3D effect to your website.


Responsive sizing with parallax

The way a website appears can vary from one screen to another this is due to different resolution sizes. The most common is 1920 x 1080px. Sporty websites are fully responive which means that regardless of what resolution size you are viewing a website on, your Sporty website will adapt to fit in the best possible way. This does mean that depending on resultion size your viewers may see the focus area of full background images slightly differently.​​​​​​​

Help! Their heads are cut off!

This image shows what a viewer would see when viewing a website with the resolution of 1920x1080. 

As this section is set to parralax when the user scrolls down they will see more of the background image.

While the head is currently chopped of when first landing on this page, when the viewer scrolls down the background they will be able to see the heads.

Understanding parallax on Sporty

Parallax images are set to fill up the whole background of your screen touching from edge to edge. When you set a background to parralax it shows you the portion of the image equal to your section background. As you scroll down the section moves exposing a different area of the image.

In this example the full parallax image is overlaid on the website to show that the image touches all 4 corners but on page load we only see the part of the image that fits in the section background.

How do I choose the perfect image?

As the most popular screen size is 1920x1080 this is a good size for you parallax image.

If you have a specific section size you want to apply a parralax image to, make sure that you save out (e.g on photoshop) the focus of your image to be inside that space. 

As the girls head in this example is so close to the top of the image we can tell that most of the time it will be covered by the menu on page load.

What if the image is not set to parallax?

If you decide you dont want your image to be set to parallax it is best to save your image to fit the dimension in line with the most common screen sizes. E.g if the space you want to fill is a section with a height of 400px with a screen width of 1920px then save out your image as 1920x400. If you want to cater for larger screen sizes you could save out your images as 2560x400. The background image in the section above uses an image size of 2560x400. If viewed on a computer with a resolution of 1920x1080 then the image will be cropped to fit.