How to make an exported project transparent?

I have a website where I have embedded my html5 project as an <iframe> using HTML.

My website also has a background image. I have tried making all the layers transparent and/or set opacity to 0 but that just gave visual errors, none of them even got close to me seeing my website background.

How do I do this, is it even possible?

Setting all layers to transparent is the correct way to do this. You may also need to check the project property 'Clear background' is set to 'Yes'.

Not meaning to be rude; are you sure your iframe is transparent itself?

stackoverflow.com/questions/1234127/iframe-transparent-background

replace

<style type="text/css">

     * {

          padding: 0;

          margin: 0;

     }

     body {

          background: #000;

          color: #fff;

          overflow: hidden;

          -ms-touch-action: none;

     }

     canvas {

          -ms-touch-action: none;

     }

on index.html with

<style type="text/css">

     * {

          padding: 0;

          margin: 0;

     }

     body {

          background:none transparent;

          overflow: hidden;

          -ms-touch-action: none;

     }

     canvas {

          -ms-touch-action: none;

     }

</style>

and add allowtransparency="true"

to your iframe

daoluong

that did the trick for me, thank you!

Hmm. I can't seem to get this to work. I'm trying to export a html5 animation with a transparent background to a website using an iframe.

I have one layer with the background set to transparent

Clear background is set to 'yes' in the project properties.

My iframe code is (though I have tried other variations as per the stackoverflow suggestion above):

<iframe width="750" height="460" src="http://www.site.com/subfolder/index.html"frameborder="0" allowtransparency="true"scrolling="no"></iframe>

The project tests just fine but once I upload it and put it into an iframe it comes over with a back backround.

Is there a project setting I am missing?

Many thanks for reading this and for any hints or tips you can provide

Huge Regards

Dave.

Ideally I want to keep the html files minified as it is already a bit of a hefty project.

Hmmm. well it seems like you need to edit the index html file of the exported project and change the background colour from black to transparent.

          body {

               background-color: transparent;

               color: white;

               padding: 0;

               margin: 0;

               overflow: hidden;

          }

I'm surprised that there isn't a project setting in Construct2 to set this or that it isn't mentioned in any of the tutorials. Mind you I am exploring C2 as a flash replacement and not currently for making games.

Dave