Page 1 of 5

Setting a background image

Posted: Fri Aug 30, 2013 3:35 am
by Priyanka Patel

Hi ,

I was wondering if its possible to set a background image with CSS code rather than JS?

I am currently using a theme that I created with ThemeRoller, so if I could set the background image for one of the swatch, that would be perfect!

Cheers


Setting a background image

Posted: Fri Aug 30, 2013 3:57 am
by Alena Prykhodko
  • Set mobilecontainer Class Name;

    • Add New CSS with code:

      code
      .ClassName {
      background: no-repeat url("https://d2r1vs3d9006ap.cloudfront.net/public/uploaded_images/10002435/appery_io_full_aspect_medium.png") 0 0;
      }
      /code

      You can size it as you want..


Setting a background image

Posted: Fri Aug 30, 2013 3:59 am
by Alena Prykhodko

If you want to use image from app https://getsatisfaction.com/apperyio/...


Setting a background image

Posted: Fri Aug 30, 2013 4:41 am
by Priyanka Patel

Tried this, doesn't work.
The background still stays as the swatch for the mobilecontainer.
This is the code I put in the CSS

.backgroundImg {

Code: Select all

 background: no-repeat url("eatyourgreens_bg.png") 0 0; 

 background-size: cover; 

}


Setting a background image

Posted: Fri Aug 30, 2013 4:43 am
by Priyanka Patel

Tried this also but still no luck.

.backgroundImg {

Code: Select all

 background: no-repeat url("../image/eatyourgreens_bg.png") 0 0; 

 background-size: cover; 

}


Setting a background image

Posted: Fri Aug 30, 2013 4:54 am
by Alena Prykhodko

Try to add to codebackground-size: cover !important; /code
Also tell steps to reproduce, I'll test your case, because code works on my end as expected.


Setting a background image

Posted: Fri Aug 30, 2013 5:06 am
by Priyanka Patel

hmm okay.

I have uploaded an image onto the app called eatyourgreens_bg.png.
Then I named the class for the mobilecontainer as backgroundImg.

Then I added the above code into the breakfast_Test.css page at the top.

Just tried the above code with !important part added on.

The swatch for backgroundImg is still set to "A", do I need to change that to inherit?


Setting a background image

Posted: Fri Aug 30, 2013 5:07 am
by Priyanka Patel

In the past, I have used this JS code and it worked fine.
Appery('breakfastScreen').css('background-image','url("' + Appery.getImagePath('eatyourgreens_bg.png') + '")');
Appery('mobilecontainer').css('background-repeat','no-repeat');
Appery('mobilecontainer').css('background-size','cover');
Appery('mobilecontainer').css('background-position','top center');


Setting a background image

Posted: Fri Aug 30, 2013 6:09 am
by Priyanka Patel

Have solved it. The code wasn't finding the image using the relative path, so had to put in the absolute path.

One more problem though, I want to get ride of the footer all together.

Currently, I have hidden the footer. And so the background of the footer is still the colour of the swatch rather than the background image.

So ideally, I could like to 'delete' the footer component as Im not using it for anything.
Is this possible?

I have tried setting the height to 0px in the css but that didn't make a difference.


Setting a background image

Posted: Fri Aug 30, 2013 6:16 am
by Maryna Brodina

Hello! Could you clarify how do you hide footer? You can untick "Show Footer" option.