Spice up your webpage with a dynamic VR background

Sudhakar Krishnamoorthy -

VR for web just added a cool new dimension to your webpage — 3D depth! The time of VR to change the way we create interfaces has well and truly begun. Firefox is now ready for VR, joining the likes of Google Chrome and Microsoft Edge. With Apple finally joining the WebVR bandwagon, VR on the web is starting to gain serious momentum.

As with all changes in technology, VR on websites has seen the swift, early adopting flag-bearers storming the front-lines; the savvy ones marching not far behind; and the bulk of the rank and file slowly pushing, trying to get a sense of where they are or what they must do.

This guide is the most basic of the basics, out of what you can do with VR on your web page. We are going to use the A-Frame library to embed a VR viewer on your page. We will use this to view a 360 degree panoramic image. Then we are going to customize it using CSS so that it becomes an interactive virtual reality background image. All you need to know is some basic HTML and CSS in order to do this.

Step 1 : Find a nice equirectangular image to use as the background

This might be the hardest step of all, unless you have an image ready. There are a couple of ways to get one if you don’t. You can look for one on Wikimedia commons, or shoot one if you have any device with a compatible camera. You can get good stock images as well.

Or just use this one right here

Step 2 : Include the A-Frame source

Add this line to the  portion of the html file where you want to embed the viewer.

You can get the latest version of the code from A-Frame’s website.

Step 3 : Add the A-Frame embed to the body

Start with identifying where you want to include a VR background image, I’ve done it as the background for the landing screen on the page (like the one in the landing page of GMETRI). Add this code somewhere inside the <body> of your html. Preferably, add it inside a parent container which you can style later on. If you don’t want the viewer to keep rotating automatically, you can remove the <a-animation> tag completely.

Step 4 : Add the CSS customization

Add these lines to the CSS so that our A-Frame embed becomes a nice background, instead of a block element.

Step 5 : Overlaying content on top of the viewer

A background doesn’t truly become a background unless there is a foreground — don’t forget to quote me on that. I am going to add a title and an action button over the viewer. This is the updated code now.

We’ll add these styles to our CSS to make the overlaying-content work

Voila! You are done. If you want to play around with the embed, I have created this template on code-pen. This trick isn’t limited to just a panorama. There are lots of interesting VR projects for the web, many of them open-source. I hope this guide helps you start exploring Virtual Reality.

Optional: Spicing it up with CSS

Both the container div and the content div can be styled using CSS. Use media queries generously to customize your content for devices. The VR embed works well in a good number of phones and tablets. In fact it is very impressive on a small screen.

The template on code-pen:

You can read more on VR for Web here. If you haven’t spiced up your web page yet, now is the time to give it the extra edge it deserves! Sign up now and start for Free.