Html.index question ?

Post reply

❤Follow Topic(6)

0 favourites

20 posts
- 1
- 2

- chrisbrobs
- - Joined 10 Aug, 2010
  - 216 topics • 1,215 posts
- 1
- 27 Jan, 2012
- Quote
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?
- Tom Construct Team Founder
- Moderator
- - Joined 10 Jun, 2007
  - 588 topics • 4,438 posts
- 1
- 27 Jan, 2012
- Quote
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
- Wink
- - Joined 13 Sep, 2011
  - 24 topics • 489 posts
- 1
- 27 Jan, 2012
- Quote
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>
- chrisbrobs
- - Joined 10 Aug, 2010
  - 216 topics • 1,215 posts
- 1
- 27 Jan, 2012
- Quote
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.
- Wink
- - Joined 13 Sep, 2011
  - 24 topics • 489 posts
- 1
- 27 Jan, 2012
- Quote
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
- - Joined 10 Aug, 2010
  - 216 topics • 1,215 posts
- 1
- 27 Jan, 2012
- Quote
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 ?
- Wink
- - Joined 13 Sep, 2011
  - 24 topics • 489 posts
- 1
- 27 Jan, 2012
- Quote
Ok I will play around with the CSS and try to get it positioned for you.
- chrisbrobs
- - Joined 10 Aug, 2010
  - 216 topics • 1,215 posts
- 1
- 27 Jan, 2012
- Quote
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!)

ranma
- Joined 20 Feb, 2008
- 88 topics • 555 posts
1

27 Jan, 2012
Quote

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}

Tom Construct Team Founder
Moderator
- Joined 10 Jun, 2007
- 588 topics • 4,438 posts
1

27 Jan, 2012
Quote

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.

- 7Soul
- - Joined 15 Dec, 2010
  - 103 topics • 1,056 posts
- 1
- 27 Jan, 2012
- Quote
Here: http://dl.dropbox.com/u/3954039/iphone%20and%20canvas.rar

Edit: ninja'd by Tom
- Wink
- - Joined 13 Sep, 2011
  - 24 topics • 489 posts
- 1
- 27 Jan, 2012
- Quote
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.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- chrisbrobs
- - Joined 10 Aug, 2010
  - 216 topics • 1,215 posts
- 1
- 27 Jan, 2012
- Quote
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 !
- chrisbrobs
- - Joined 10 Aug, 2010
  - 216 topics • 1,215 posts
- 1
- 27 Jan, 2012
- Quote
Thanks for all your replies.

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

<img src="smileys/smiley1.gif" border="0" align="middle" />
- ranma
- - Joined 20 Feb, 2008
  - 88 topics • 555 posts
- 1
- 27 Jan, 2012
- Quote
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.