Forum | Appery.io

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

• 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..

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

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 {

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

 background-size: cover; 

}

Tried this also but still no luck.

.backgroundImg {

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

 background-size: cover; 

}

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.

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?

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');

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.

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