Html.index question ?

Discussion and feedback on Construct 2

Post » Fri Jan 27, 2012 9:14 pm

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?
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 9:15 pm

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
Image Image
Scirra Founder
B
124
S
37
G
25
Posts: 3,945
Reputation: 44,887

Post » Fri Jan 27, 2012 9:32 pm

@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>Wink2012-01-27 21:35:36
B
50
S
11
G
8
Posts: 479
Reputation: 9,911

Post » Fri Jan 27, 2012 9:35 pm

[QUOTE=Tom] 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[/QUOTE]


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.
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 9:43 pm

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.Wink2012-01-27 21:45:27
B
50
S
11
G
8
Posts: 479
Reputation: 9,911

Post » Fri Jan 27, 2012 9:45 pm

[QUOTE=Wink] @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>[/QUOTE]


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

B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 9:46 pm

Ok I will play around with the CSS and try to get it positioned for you.
B
50
S
11
G
8
Posts: 479
Reputation: 9,911

Post » Fri Jan 27, 2012 9:55 pm

[QUOTE=Wink] Ok I will play around with the CSS and try to get it positioned for you.[/QUOTE]

I know that theses settings can can be used:

But I'm not sure how to implement it.

(I need to spend a couple of hours reading up on it!)
B
19
S
6
G
7
Posts: 1,204
Reputation: 7,296

Post » Fri Jan 27, 2012 10:07 pm

try

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

or simply try a shorthand

[code]
body {background: url(iPhone.gif) center center no-repeat}
[/code]
B
81
S
50
G
10
Posts: 555
Reputation: 13,009

Post » Fri Jan 27, 2012 10:08 pm

Wrap the canvas tag with this div:

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

And try this CSS:

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

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.
Image Image
Scirra Founder
B
124
S
37
G
25
Posts: 3,945
Reputation: 44,887

Next

Return to Construct 2 General

Who is online

Users browsing this forum: DankP3, NetOne and 3 guests