Mike4997955
Posts: 0
Joined: Wed Sep 12, 2012 7:50 pm

How do i re-size a background image to fit the screen?

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?

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

How do i re-size a background image to fit the screen?

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

Agon Bina
Posts: 0
Joined: Thu Oct 04, 2012 5:01 am

How do i re-size a background image to fit the screen?

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.

Agon Bina
Posts: 0
Joined: Thu Oct 04, 2012 5:01 am

How do i re-size a background image to fit the screen?

I fixed my issue :)

Mike4997955
Posts: 0
Joined: Wed Sep 12, 2012 7:50 pm

How do i re-size a background image to fit the screen?

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

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

How do i re-size a background image to fit the screen?

Share the page link where you have this code running.

Mike4997955
Posts: 0
Joined: Wed Sep 12, 2012 7:50 pm

How do i re-size a background image to fit the screen?

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.

Mike4997955
Posts: 0
Joined: Wed Sep 12, 2012 7:50 pm

How do i re-size a background image to fit the screen?

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.

maxkatz
Posts: 0
Joined: Fri Aug 13, 2010 3:24 pm

How do i re-size a background image to fit the screen?

Glad to hear. Can you share the code?

Mike4997955
Posts: 0
Joined: Wed Sep 12, 2012 7:50 pm

How do i re-size a background image to fit the screen?

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.

Return to “Issues”