Hello, Im new at squiffy and I´m really having fun descovering what can I do. Im testing the software and making apps to learn about how it works. All is ok, except for one problem with adding an image as a background.
First I add an image to the gamebook directly for my desktop. And when I make the app, the image was broken...So, I decided to upload the image to imgbb, and put the url in background like this:
background: url("https://image.ibb.co/mWdGX5/Cellbackground.png") left repeat;
So I tested in chrome my html and worked good! But when I make the app and test in my phone! I doesnt work! It only shows the modified background color which I changed. What can I do?
Am i doing something wrong? Is there another way to achieve this? A way that dont include just change the background color?
Best Regards!
Sorry for the late replay, Manowar. I use this code:
body
{
background: url("https://image.ibb.co/mWdGX5/Cellbackground.png") left repeat;
background-color:black;
color: white
}
It works good, first I put an adress pointing to a folder where I have the image " C:\Users\usuario\Desktop\textadventure\1.png", and it worked too! But this doesnt work if I make an app...so I uploaded the image to imgbb, as you can see in: "background: url("https://image.ibb.co/mWdGX5/Cellbackground.png") left repeat;", but the background doesnt show...just the background color which I changed to black and the letters to white as you can see in the code.
I modified "style.css" in visual studio. Am I doing something wrong? Regards!!
Hrmm... That code didn't work in Chrome on my end, just the black background.
But when I removed left repeat, the picture showed up.
This works in my Chrome browser. (It only displayed black before this change.
body {background-image:url('https://image.ibb.co/mWdGX5/Cellbackground.png');background-color:black;color: white;}
You can use background-repeat: repeat-y; to repeat vertically, and background-repeat: repeat-x; to repeat horizontally. (Neither setting had any effect in my browser, though.)
Be sure to include the ; after the ) at the end of your image name, too!
As far as the left you have in there is concerned: what is it to do? I tried out float:left, but that made most of the image disappear.
NOTE: I am by no means an expert. Just trying to help out.
I know you said the problem is only in the APK, but it didn't display the image in my Chrome browser until the change, so this may help with the APK as well.
Best wishes!
Hello, thanks for the reply, Richard! Until today I didnt have time during the week to test what you recommend me. The problem is still there even with your observations. What else can I do? Is not important having a background in my game, but it would a lot of better to add some good atmosphere. The problem is the same: At the apk, the background doesnt show with the url! is there another way?
Best regards!
PD. PROBLEM SOLVED
It seems that phonegap have some kind of problems with urls. If you want some images in your apk, just put them in the root and rename the files in lower case.
My solution was this:
body
{
background: url("cellbackground.png");
background-repeat: repeat;
background-color:black;
color: white
}
Thanks!
Glad you got it!
(I'm copying your code and saving it in my SQUIFFY-HOW-TO folder! Thanks for posting the fix!)