04-12-12 09:51 AM
tools
  1. ryanhennessey's Avatar
    ryanhennessey
    I'm currently working on developing my first HTML5 app for the playbook, currently just for personal use/enjoyment. I want to use a background image(the same one) for all my pages, and have a semi-transparent box above it where all my actual data would go. The only problem is that the image is slightly too small for the width of the playbook, while height is fine. I used CSS to stretch it to fit, but for some reason it shrunk the height to a quarter of the playbook, while stretching the with to 100%. I can't seem to figure out how to fix it.

    Also, as a side question, for the box above it, would I need specific dimensions? Or is there a way to just set a border width and it'll fit itself to the playbook screen?

    Thanks for any help anyone can give me on either issue!
    04-11-12 10:47 AM
  2. jamesharmeling's Avatar
    jamesharmeling
    Trusted Member
    This is WAY above my pay grade, but good luck anyway! Looking forward to seeing what you in the works. Wanna give us a hint?
    04-11-12 01:56 PM
  3. kjkillick's Avatar
    kjkillick
    Never coded a HTML5 app before but -I've made a few webpages and teach HTML+CSS+JS.

    First of all I would crop your background picture. If you stretch it you run the risk of distortion and/or pixellation which will make your app look cheap. Personally, I would avoid background pictures unless you are putting your text on top of another solid colour layer.

    With your CSS issues, avoid percentages, define the size of your elements in pixels. This ensures that the CSS renders correctly. Beware of hidden margins/padding.

    Hope that helps ...
    04-11-12 01:58 PM
  4. ignites's Avatar
    ignites
    Originally Posted by ryanhennessey
    I'm currently working on developing my first HTML5 app for the playbook, currently just for personal use/enjoyment. I want to use a background image(the same one) for all my pages, and have a semi-transparent box above it where all my actual data would go. The only problem is that the image is slightly too small for the width of the playbook, while height is fine. I used CSS to stretch it to fit, but for some reason it shrunk the height to a quarter of the playbook, while stretching the with to 100%. I can't seem to figure out how to fix it.

    Also, as a side question, for the box above it, would I need specific dimensions? Or is there a way to just set a border width and it'll fit itself to the playbook screen?

    Thanks for any help anyone can give me on either issue!
    dont use stretch.. use width="100%" but it make make the height too big.. so either crop it to size before using black banners or keep it at original size and ratio and set your background colour to black.
    04-11-12 03:31 PM
  5. zethaaron's Avatar
    zethaaron
    If I were you I would just use paint or something to actually modify the image to the right resolution, and then apply it, should be much easier.
    04-11-12 10:06 PM
  6. anon(3896606)'s Avatar
    anon(3896606)
    Either use "width: 100%" or go into a program such as Paint and modify the size of the image.(The picture would look better this way)
    04-12-12 06:29 AM
  7. jeroen_13's Avatar
    jeroen_13
    Use this code (place it in the <head>) ; <meta name="viewport"
    content="width=device-width;
    initial-scale=1.0; maximum-
    scale=1.0;"/> This wil scale your APP too 100% !
    Jeroen
    Last edited by jeroen_13; 04-12-12 at 10:10 AM.
    04-12-12 09:51 AM
« box app | best app for playbook? »
LINK TO POST COPIED TO CLIPBOARD