Upload custom background image?

[maxkatz]

http://docs.appery.io/documentation/a...

Replace tiggzi -- apperyio in the URL:

https://getsatisfaction.com/apperyio/...

[Brandon Scott Barney5989131]

Dear Marina,

That did help and I've managed to get the background image displaying on my application. The background image is a 320 x 480 image and I would like it to display at a constant size and resolution, centered in the middle of the screen, no matter how large the screen is. I consulted these GetSatisfaction forums and I have found this thread:

https://getsatisfaction.com/apperyio/...

I changed the image component's Class Name to "centeredImage" per the thread's recommendation then I created a CSS file (I named it centeredImage.css to keep it clear) and added the text to the CSS file:

The img.centeredImage {
display: block;
margin-left: auto;
margin-right: auto;
}

Now I have added the following line to the same CSS file:

background-repeat: no-repeat;

(I noticed that it was repeating the image on my phone and so I searched for that and I want it centered and not repeating so I found this: http://www.w3.org/wiki/CSS_background...)

of course this did not work exactly as planned and I am curious about putting the information about centering and non-repeating inside the javascript that I have on page load that calls the background image in the first place. I have this:

Appery('mobilecontainer1').css('background-image', 'url("' + Appery.getImagePath('IMG_0201_sfw.png') + '")');

I searched for tutorials on positioning images and I learned that:

"...Using shorthand to pull the whole thing together like a pro
As you have already seen, certain CSS properties can be grouped together. Background and all of its sub properties are among them. The CSS code we’ve written so far can be rewritten in shortened form, as follows:

.alert{'''background: #FFFFCC url(alert.png) no-repeat scroll 10px 10px''';}
Tip: When grouping sub properties of background, always put the properties in the following order—this is important for both cross browser compatibility and stylesheet organisation and maintenance:

color
image
repeat
attachment
horizontal position
vertical position
Try replacing the old CSS with the shorthand shown above, and your example should look exactly the same—see Figure 12"...from http://www.w3.org/wiki/CSS_background...

So I tried to change this:

Appery('mobilecontainer1').css('background-image', 'url("' + Appery.getImagePath('IMG_0201_sfw.png') + '")');

to this:

Appery('mobilecontainer1').css('background-image', 'url("' + Appery.getImagePath('IMG_0201_sfw.png') + '")', no-repeat, scroll, center);

But it generated bugs that I couldn't fix so I confirmed that I added that to the CSS file "centeredImage" but its still not working. When I checked it in the simulator the image didn't appear to be centered and it didn't stop repeating. Could you help?

Best,

Brandon

[Anton Artyukh5836028]

Hi Brandon,

Please add Class Name codeimage-box/code for box where you want to show your background image (its can be mobilecontainer of your screen).

then add CSS-styles to project (if not exists) and add there this code:
precode.image-box {
background: no-repeat scroll center center transparent;
}/code/pre

After that, add JS-code for Load screen event:
precode$(".image-box").css("background-image",
"url(" + Appery.getImagePath('IMG_0201_sfw.png') + ")" );/code/pre

[Brandon Scott Barney5989131]

Thank you so much. This code worked well. I have a few questions:

My goal is to adapt my current app so that instead of the switch code I have running on the GameSelect screen that dynamically changes the labels on game screens....I want switch code that dynamically sets the 6 gamescreens to the correct respective background images that will have the text of the puzzle on them...for the purposes of education I plan to just keep my existing code and set those labels to be transparent, but I'm uncertain about the best way to augment my switch code so that it sets the background images to the correct file. I am nervous because I have a lot of background images, so I'm curious about the ability for us to do a batch process on about 1000 background images...I hope we don't have to upload them one by one.

Also, I have found that you can make clickable areas on images using the area tag http://www.w3schools.com/tags/tag_are..., but I'm having a problem figuring out how to implement this. Should I edit the HTML code directly now that you have made the source code editable? I know that the changes won't show up (per a blog post about the upcoming July 2 webinar where you will officially announce the changes). Do you have any GetSatisfaction threads on that subject of how to make this work to recommend? My search didn't turn up much.

[maxkatz]

You can use the Panel component to add any source code (HTML/JS) and implement the clickable area for images.