# How to create transparent background in viewer

**URL:** <https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769>\
**Category:** Questions\
**Created:** [July 23, 2020, 1:33pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769 "2020-07-23T13:33:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hououinkyouma](https://avatars.discourse-cdn.com/v4/letter/h/13edae/32.png) [@hououinkyouma](https://forum.babylonjs.com/u/hououinkyouma)\
**Post date:** [July 23, 2020, 1:33pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/1 "2020-07-23T13:33:14Z")

</div>

Hi. I’m struggling to force scene background to transparent in babylon js viewer for few hours.

For now, my code looks like this:  
[https://pastebin.com/rjRfnkb1](https://pastebin.com/rjRfnkb1)

Is there any parameter that allow me to completely turn off scene background, make it transparent and display only the object that I loaded?  
Thank you in advance.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 23, 2020, 1:49pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/2 "2020-07-23T13:49:03Z")

</div>

Pinging @RaananW

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 23, 2020, 1:50pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/3 "2020-07-23T13:50:51Z")

</div>

I don’t know the viewer, but you can try:

```xml
<clear-color r="1" g="0" b="0" a="0"></clear-color>

```

---

<div class="post-metadata">

**Author:** ![hououinkyouma](https://avatars.discourse-cdn.com/v4/letter/h/13edae/32.png) [@hououinkyouma](https://forum.babylonjs.com/u/hououinkyouma)\
**Post date:** [July 23, 2020, 1:55pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/4 "2020-07-23T13:55:42Z")

</div>

> [@Evgeni\_Popov](#):
>
> `<clear-color r="1" g="0" b="0" a="0"></clear-color>`

I tried, but clear color don’t do anything. It’s still showing default deep purple color from “extends=“minimal”” or gray gradient from “extends=“default””

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 23, 2020, 1:56pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/5 "2020-07-23T13:56:43Z")

</div>

Seems to work - [A Pen by Raanan Weber](https://codepen.io/raananw/pen/dyGroaK)

---

<div class="post-metadata">

**Author:** ![hououinkyouma](https://avatars.discourse-cdn.com/v4/letter/h/13edae/32.png) [@hououinkyouma](https://forum.babylonjs.com/u/hououinkyouma)\
**Post date:** [July 23, 2020, 2:02pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/6 "2020-07-23T14:02:41Z")

</div>

You’re right.  
Strange.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/bd503bc7fb461e5acb90547fcc4581e57bb97a2b.png)  
This is what I’m getting. Maybe it’s a problem with Wordpress.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 23, 2020, 2:03pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/7 "2020-07-23T14:03:16Z")

</div>

if you want to share a non-working example, we will be able to help further 🙂

---

<div class="post-metadata">

**Author:** ![hououinkyouma](https://avatars.discourse-cdn.com/v4/letter/h/13edae/32.png) [@hououinkyouma](https://forum.babylonjs.com/u/hououinkyouma)\
**Post date:** [July 23, 2020, 2:05pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/8 "2020-07-23T14:05:08Z")

</div>

Now I literally copy pasted that example above and replaced the object.  
[http://vfxstudio.pl/babylon-js/](http://vfxstudio.pl/babylon-js/)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 23, 2020, 2:07pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/9 "2020-07-23T14:07:14Z")

</div>

You probably need to open the page for public views -

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3be5882c7eb3eaed80411881bf8c3434189f3143.jpeg)

---

<div class="post-metadata">

**Author:** ![hououinkyouma](https://avatars.discourse-cdn.com/v4/letter/h/13edae/32.png) [@hououinkyouma](https://forum.babylonjs.com/u/hououinkyouma)\
**Post date:** [July 23, 2020, 2:11pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/10 "2020-07-23T14:11:11Z")

</div>

should be okay now

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 23, 2020, 2:18pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/11 "2020-07-23T14:18:45Z")

</div>

Seems like a few   
 were added to the code without any need -

```auto
 <babylon extends="minimal"><br />
            <model url="/obj/spuckschutz1.glb"><br />
                <scaling x="1" y="1" z="1"></scaling><br />
            </model><br />
            <camera><br />
                <behaviors><br />
                    <auto-rotate type="0"></auto-rotate><br />
                </behaviors><br />
            </camera><br />
          <scene><br />
        <clear-color r="1" g="0", b="0" a="0"></clear-color><br />
    </scene><br />
        </babylon>

```

The parser fails (my guess is that it can’t find a top-level babylon BR object and stops). Remove those   
 and it will work correctly

---

<div class="post-metadata">

**Author:** ![hououinkyouma](https://avatars.discourse-cdn.com/v4/letter/h/13edae/32.png) [@hououinkyouma](https://forum.babylonjs.com/u/hououinkyouma)\
**Post date:** [July 23, 2020, 2:26pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/12 "2020-07-23T14:26:03Z")

</div>

> [@RaananW](#):
>
> ```auto
> <babylon extends="minimal"><br />
> <model url="/obj/spuckschutz1.glb"><br />
> <scaling x="1" y="1" z="1"></scaling><br />
> </model><br />
> <camera><br />
> <behaviors><br />
> <auto-rotate type="0"></auto-rotate><br />
> </behaviors><br />
> </camera><br />
> <scene><br />
> <clear-color r="1" g="0", b="0" a="0"></clear-color><br />
> </scene><br />
> </babylon>
> 
> ```

It was a problem with wordpress default editor (even “text” mode wasn’t enough).  
Now it works. Thank you so much.  
One more question. Is it possible to remove that black border around the scene (after left mouse click)?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 23, 2020, 2:41pm UTC](https://forum.babylonjs.com/t/how-to-create-transparent-background-in-viewer/12769/13 "2020-07-23T14:41:31Z")

</div>

I’m think this is the focused border css definition, but I’m not entirely sure. Check forcing the border to 0 I can check later if I can find a different solution