Change 360 spin background

Changing the background behind a product can radically shift the user experience. This technique is widely used in the fashion and high-end goods industries. Luxury goods websites are now among the pioneers of applying rich backgrounds to 360 spinning products.

Transparent images are the essential requirement for this effect. This tutorial will explain how to create a 360 spin with any background on your website.

One spin, 4 experiences

 

The original spin is to the left, with the transparent background. The other 3 spins have a background image applied to them.

Sirv or CSS?

There are two ways to apply a background image:

1. Use Sirv to layer the background on the original PNG images.
2. Use CSS to apply a background in your HTML.

Using Sirv, every image is processed to include the background layer. This has advantages, including:

1. Choice of formats - output images as JPEG or WebP, which load much faster than PNG.
2. Responsive - perfectly scales to any size.
3. Goes fullscreen - choose whether to apply the background to full-screen and zoom images.

The tutorial below shows how to configure a 360 spin with background. If you're already familiar with Sirv, it's the same process for adding a background or foreground layer to a static image.

Before you start

You'll need these images:

• A spin in PNG-24 format, with alpha transparency.
• A background image.

How to shoot PNG images

It's harder to shoot transparent images than traditional photos against a white background. Transparent images must be shot against a green screen.

Tip:If your item contains the color green, shoot against a blue screen.

Achieving good results requires time, effort and special equipment. 360 hardware specialist FFWI in Germany has created machines to shoot spins in PNG with alpha transparency.

If you're shooting a high volume of products, these machines are available to purchase or lease.

If you have fewer than 100 products, you can send them to FFWI and they'll shoot them from prices starting at 30 EUR per product.

How to create a background image spin

The background image will be treated as a watermark. Rather than sitting over the spin, it will be customized in the profile to sit behind.

1. Upload your background image to your Sirv account. It can be saved in any folder of your account. (New users can create a Sirv account).

Here's the background image we will use:

2. Go to your Profiles folder and click "Create Profile".

3. Give your profile a descriptive name that you'll recognize and click "Create".

4. Navigate to Profile > Image options > Watermark overlays.

5. Click the "+" button to create a new watermark.

6. Go to Image > Click "System default". Then enter the location of the background image in your Sirv account, starting from the root /.

7. Go to Layer > Click "System default" > Select "Back" option. You can choose any other options you wish, for example the size of the background.

8. Save your options and the profile will be ready to use.

9. Apply the profile to a spin by appending ?profile=name-of-your-profile to the spin url.

In the 4 examples above, the URLs are:

• http://sirv.sirv.com/website/demos/gin-bottle-alpha/gin-bottle-alpha.spin
• http://sirv.sirv.com/website/demos/gin-bottle-alpha/gin-bottle-alpha.spin?profile=background-beach
• http://sirv.sirv.com/website/demos/gin-bottle-alpha/gin-bottle-alpha.spin?profile=background-ice
• http://sirv.sirv.com/website/demos/gin-bottle-alpha/gin-bottle-alpha.spin?profile=background-clubbing

If you need help configuring 360 spin with background, please contact the support team using your account support form.

If you're a 360 photographer offering spins with PNG with alpha transparency, please get in touch and let's talk about how we can work together.