0 Favourites

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

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)