Html.index question ?

Post reply
0 favourites
From the Asset Store
Dolphin Jump - HTML 5 - Construct 3
$9 USD
Get ready to dive into a sea of endless excitement with "Dolphin Jump," the thrilling new game that puts you in control
clarkgame's avatar
clarkgame

  • Can anybody tell me (Kyatric hopefully), whats wrong with following:

    <style type="text/css">

    canvas { border: 1px solid red; }

    {

    background-image:url('iPhone.gif');

    background-repeat:no-repeat;

    background-attachment:fixed;

    }

         </style>

    It doesnt work for some reason?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • What doesn't work exactly? Make sure the URL to iPhone.gif is relative to the location of the index.html file (or css file if external)

    If you show me a demo page I can tell you what's wrong

  • chrisbrobs Your body needs to be defined in your CSS, and it needs to be separate from your canvas element.

    Something like this:

    <style type="text/css">

    canvas {

        border: 1px solid red;

    }

    body {

        background-image: url('iPhone.gif');

        background-repeat: no-repeat;

        background-attachment: fixed;

    }

         </style>

  • What doesn't work exactly? Make sure the URL to iPhone.gif is relative to the location of the index.html file (or css file if external)

    If you show me a demo page I can tell you what's wrong

    The files are here: iphone

    I just wanted a way to display an image surrounding the C2 Canvas

    in the browser window......I know you guys are busy, but if you get a spare minute would you have a look at it.

    Thanks in advance.

  • In your file your iPhone.gif is named smiley.gif. Use the code I posted above but change:

    background-image: url('iPhone.gif');

    to:

    background-image: url('smiley.gif');

    You will have to play around with the CSS to get it into position though.

  • chrisbrobs Your body needs to be defined in your CSS, and it needs to be separate from your canvas element.

    Something like this:

    <style type="text/css">

    canvas {

        border: 1px solid red;

    }

    body {

        background-image: url('iPhone.gif');

        background-repeat: no-repeat;

        background-attachment: fixed;

    }

         </style>

    I tried the above..it works, but it isn't centered ?

  • Ok I will play around with the CSS and try to get it positioned for you.

  • Ok I will play around with the CSS and try to get it positioned for you.

    I know that theses settings can can be used:

    <img src="http://dl.dropbox.com/u/22173473/align.png" border="0" />

    But I'm not sure how to implement it.

    (I need to spend a couple of hours reading up on it!)

  • try 

    body {
    background-image: url('iPhone.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center
}

    or simply try a shorthand

    body {background: url(iPhone.gif) center center no-repeat}

  • Wrap the canvas tag with this div:

    <div class="wrapper">... canvas code ...</div>

    And try this CSS:

         <style>
     .wrapper
     {
          width:332px;
          height:514px;
          background:url(smiley.gif);
          padding-top:122px;
     }
     </style>

    Is that sort of what you mean? The canvas doesn't fit in perfectly the iphone image so it comes off the bottom a bit.

  • Edit: never mind 7Soul beat me to it. <img src="smileys/smiley1.gif" border="0" align="middle" />

    Looks like you will have to re-size your gif though. Its a little small.

  • ranma@

    I tried the center center option and it lines up on the x axis but it is still slightly out along the Y.

    Tom@

    <div class="wrapper">... canvas code ...</div>

    <style>

         .wrapper

         {

              width:332px;

              height:514px;

              background:url(smiley.gif);

              padding-top:122px;

         }

         </style>

    Where would I insert this in the following code?

    <style type="text/css">

    canvas {

        border: 1px solid red;

    }

    body {

        background-image: url("iPhone.gif");

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-position:center center;

    }

         </style>

    <body>

         <div id="fb-root"></div>

         <div style="text-align: center;">

    Sorry to be a pain !

  • Thanks for all your replies.

    7Soul gets the award for expanding my pathetic Knowledge base.

    <img src="smileys/smiley1.gif" border="0" align="middle" />

  • also add

    html,body {margin:0;padding:0;border:0}

    default margins / padding are set to be > 0 by default by the browser that's why it's off i think.

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)