Studiopress Minimum Pro Background Image Options

I have been helping a buddy work with Studiopress’s Minimum Pro theme. We decided we liked the theme and went ahead and purchased it. Click below to give me a little affiliate love!! It is no doubt very beautiful and sleek.

StudioPress Theme of the Month

The Parallax Effect and Background Image

The one thing that we didn’t realize when purchasing the theme was that the background image of the Minimum Pro theme uses an interesting effect known as parallax. This is done through JQuery I believe and affects scrolling / images. At webdesignerdepot.com, she has a post called How to create a simple parallax effect. You can find a simple example done and the effect is explained:

In essence, a parallax scroll is when content scrolls at different speeds, creating a sense of perspective and therefore depth.

Here are some very advanced examples of the parallax effect which are pretty cool. The effect when used in the Minimum Pro Theme, basically causes the main background image on the homepage to remain still while the bottom content scrolls over it. This is a little hard to describe. Check out the demo for the Minimum Pro theme at Studiopress’s site to see it in action. Notice how the background image behaves.

Here is the original image that is used in the demo.  So you can see the starting point and what is cropped.

Here is the original image that is used in the demo. So you can see the starting point and what is cropped.

Here you see the image as the parallax effect has rendered it for the homepage.  Notice the scrollbar positioning and compare it to the next image.

Here you see the image as the parallax effect has rendered it for the homepage. Some of the original has been cropped. Notice the scrollbar positioning and compare it to the next image.

As you scroll down you can see that the background image stays still while the rest of the page goes up and covers it.

As you scroll down you can see that the background image stays still while the rest of the page goes up and covers it.

If you read in the documentation for the theme, studiopress says:

Note: This background image does not need to be a specific size since the theme is responsive and will crop, shrink, and grow the image as needed. However, due to the nature of the effect applied to this background image, not all images will look correct. Images without a specific focal point, such as natural scenes that will not look unusual when only a portion of the image is displayed, will work best.

This means that depending on the device the parallax effect will cut the image in ways you cannot easily determine. Thus some of your image will be chopped off. You can see some different examples of screenshots below. This was taken from Studiopress’s Responsive Testing Page. Notice the difference by looking at the poles on the fence.

minimum_pro_responsive_looks

Rather than trying to get the right image perhaps there is another way to ensure we can use a specific image size/setup so that it will display the same every time… We don’t want cropping.

Solutions or Workarounds for the Parallax Effect on Minimum Pro’s Background Image

The parallax scroll effect is awesome and would be fine but the site my buddy has in mind will have an image with a specific focal point in mind. This means we won’t want for example the guy in my friend’s drawing to have his head cropped off. We want a little more control over that background image. We want my buddy’s awesome showcase logo piece to be fully visible no matter what.

Well I suppose it would have been nice to know about this effect before choosing this theme but hey things happen. So what workarounds are there for this situation.

Through searching I have found some nice solutions that were laid out by Sridhar Katakam on his blog at http://sridharkatakam.com.

I am following his posts:

I will not be detailing the steps to do these tasks. Only their outcomes. The main thing I wanted from his posts was to see what each did so I could choose but that was missing so I thought I would recreate the effects for my buddy so we can choose the one we like best. If you wish to reproduce these outcomes you could easily follow his advice in the links above or watch the video below.

I would have posted a demo but that would require a seperate install of wordpress I believe…

Options for Our Project

The project we are working on at thefrankenstoryproject.com will have an image on the homepage that cannot be cropped or I suppose we could change our idea so here are the three options we have.

  1. Abandon the idea of a cool graphic and choose some pic like the help on Studiopress suggests. Choose a pic without a focal point.
  2. Abandon the parallax scroll and have our image responsive
  3. Best of both worlds: Have a background image that works with the parallax scroll and put our cool logo over the top of it

I think you can guess what I lean towards…
Below you can see a video which shows the three in action….

http://sridharkatakam.com
For further details on how to accomplish this check out Sridhar Katakam’s the links above…
Thanks for the help sir!!!