Forum | Appery.io

My background images need to re-size to fit the screen. I've added the following CSS code from the project menu:

[dsid=HomeScreen] .ui-body-f {
background-size: cover;
}

I also tried adding through more properties, with no luck. I thought i added the code correctly. What do you suggest?

Are you sure above CSS does the resizing and the selector is correct?

For some reason I'm having problems changing the background using CSS. I used background-image:url(link to the image here); but it won't change anything.

And yeah 'cover' should work to cover the whole screen, at least it works in regular websites.

I fixed my issue

Can you share your fix? I'm still stuck.

Share the page link where you have this code running.

Here's the link:
http://project.tiggzi.com/mobile-fram...

background-image:url did not work, so as a work around i selected the image via the theme. But the css does work on regular webpages.

I'm debugging with chrome developer tools and found:

swatchf0.css has css with backround identifier. when i add "background-size: cover;" it does not change the backround image.

The CSS i added via tiggzi, was appended correctly to the file.

The Javascript I added gave the following error: Uncaught syntax error unexpected identifier

Thanks for helping with this.

I found the fix debugging it with chrome. My selector was incorrect. It was easiest to use CSS to change the elements in the theme.

Glad to hear. Can you share the code?

Sure. I duplicated my theme in tiggizi, and used chrome develop tools to find the CSS file and the class for the .ui-body for my theme

I added this css:

.ui-body-f {
background-repeat:no-repeat;
background-size: cover;
}

It works, but if you know a easier way to change that component, then please let me know.