Adding a background image Object2VR 4

Tue Feb 06, 2024 1:52 pm

Adding a background image to an Object2VR project.
Please see this example: https://support.ggno.me/forum_projects/robby

All your input images need to be PNGs with transparency.

Add the images to Object2VR 4 and add a web output.

Under the Web output select the image tab and change the settings:

: 1.png (80.48 KiB) Viewed 888 times

1) Deselet Background Visible
2) Set Format to PNG
3) Set Single Resolution

Add the background image to Assets, in this example the background image file name is red_planet.jpg.
The Assets are found under the Advanced tab of the Web Output.
The background image in this project is 2048 x 1148px JPG which is 724 KB.
Not forgetting it has to load the background image as well as your images so make sure it is not too large.

Open the skin editor and select the Code Element.

: 2.png (15.64 KiB) Viewed 888 times

Add the below code, note you will need to change the file name to your background image.

: Screenshot 2024-02-06 at 12.36.57.png (125.66 KiB) Viewed 888 times

Code: Select all

/*!
<style>
  body {
  background-image: url('assets/red_planet.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
 }

 #container > :first-child {
  background-image: url('assets/red_planet.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  }
</style>
*/

Genarate the output and you will see the background image.