Sean Kelley
Posts: 0
Joined: Thu Oct 11, 2012 2:25 pm

hybrid app image url for css

I have css which references image via a relative path like...

.ui-page, .ui-mobile-viewport {
background: url(../image/tiling_stripes.gif);
}

If I upload images on theme creation, I assume (possibly wrongly) they are stored on device when my hybrid app is built. The above line does not work to load on device. How do I access the local copy- ie what is the path for images on device?

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

hybrid app image url for css

Hi Sean, do you add this image file to the new theme, after you uploaded them?

Please, take a look at :: http://docs.tiggzi.com/documentation/...

Sean Kelley
Posts: 0
Joined: Thu Oct 11, 2012 2:25 pm

hybrid app image url for css

yes I did

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

hybrid app image url for css

On what device you tested your app? And did you see your images inside exported project?

Sean Kelley
Posts: 0
Joined: Thu Oct 11, 2012 2:25 pm

hybrid app image url for css

android- phone and tablet 4.1 and 4.2. I do not see the images on device. I did put in complete tiggzi project url once and saw them in web testing but I want to have them on device for both iOS and android

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

hybrid app image url for css

Hi Sean,

Did you check your CSS in desktop browser?
Maybe you would need to replace CSS with the following:
code.ui-page .ui-content {
background: url(../image/tiling_stripes.gif);
}/code

Sean Kelley
Posts: 0
Joined: Thu Oct 11, 2012 2:25 pm

hybrid app image url for css

I actually have the following along with a few other image references that do not work...

.ui-page, .ui-mobile-viewport {
background: url(../image/tiling_stripes.gif);
}
.ui-content {
color: #4c596e;
background: url(../image/tiling_stripes.gif);
}

As I said before, when I provided the full project url to image in css I saw all graphics but with relative url nothing. I do not think there are issues with CSS general statements other than the location of images in binary project exported.

I also noticed in the web test that that the header appears to contain two themes instead of one. I am not sure if this is normal or not. The one selected in project settings is iOSSean and jqm was what I had before.
code
<link href="&#47;views&#47;4da1f8c9-5113-404d-8019-8273cd62a4ca&#47;theme&#47;jqm&#47;jqm&#46;css" rel="stylesheet"
&#47;>
<link href="&#47;views&#47;4da1f8c9-5113-404d-8019-8273cd62a4ca&#47;theme&#47;iOSSean&#47;iOSSean&#46;css"
/code

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

hybrid app image url for css

To use images in themes you would need to add them to theme:
Image
Then you can use them in CSS via the following code:
code&#46;ui-page, &#46;ui-mobile-viewport {
background: url(tiling_stripes&#46;gif);
}/code
See our Tiggzi tutorial about working with themes: http://docs.tiggzi.com/documentation/...

Michael4771079
Posts: 0
Joined: Sat Jul 21, 2012 2:03 pm

hybrid app image url for css

Sean,

if you are trying to use this theme
https://github.com/taitems/iOS-Inspir

I have a working example app if you want it

Sean Kelley
Posts: 0
Joined: Thu Oct 11, 2012 2:25 pm

hybrid app image url for css

I thought I had added them to theme by dropping them onto area but I see that I did not explicitly add them. I have done it now (thanks to your graphic) and it still does not work

.ui-page, .ui-mobile-viewport {
background: url(tiling_stripes.gif);
}

.ui-content {
color: #4c596e;
background: url(tiling_stripes.gif);
}

Should i see images in web test and device or just device? Will it be the same for iOS and android?

Return to “Issues”