Background Image

Relative to the whole app, if I want to use an image (either on my local pc or online) where would I put that information so that it becomes the background. I see background section of css but I am not sure what information format it is looking for?

Would would this need to be an http scr type string? Does it need to go on each view or ?

What is a BackgroundAttachment? Or just the Background property?

Should the code of these items be like what is shown in a css file?

Thanks

Hello Donald,

The CSS style which every control exposes correspond with the appropiate CSS rule. Assigning values to that CSS properties are valid for the specific control and no others. About the "background-attachment", please, take a look at this article in W3Schools. Also in that article you can see the syntax for the "background-image", which is something like this:

That is, what we need to put in the "background-image" editbox is "url('w3css.gif')" (without double quotes) and, in the case of our applications, something like this, if we previously added the image for the background using the app's file's manager:

If you use the CSS properties of an app's view, then such CSS properties are applied to such view only. If you use the app's CSS properties, then the background appear in all app's views.

Let me to say that W3Shools is a good site in order to learn about CSS and their rules. However, if you have any further question, you know, don't hesitate to post it here Donald.

Here is what I have done in my attempts.

in the Style section of the view, in backgrondimage I added this code.

background-image: url('app/images/redwhite.png');

before debugging, I added the image file to the above path.

When I run the debugger it does not show any image and actually removes the image file from that folder.

I also tried the same thing from the cssinline and no result as well.

I suspect I don't have the path right in format or something.

What options do we have for the url portion, can it be a full http:;;www, etc,
or a local path like c:/images/redwhtie.png etc.

Some of the paths I have tried have locked up AB.

Do you have any samples that would show the correct configuration?

Thanks as always David

PS

This broswer in AB is read only in the forum. At least for me it is, Anyway to make it so we can copy code samples from the forum views?

Hello Donald,

What we need to put into the "BackgroundImage" editbox is just this:

As you can see, the path must be relative to the CSS file. Please, take a look at this sample application I prepared for you. In this case, the background is applied to the entire application. Download the sample from the below link:

Background.zip

Hello,

PS

This broswer in AB is read only in the forum. At least for me it is, Anyway to make it so we can copy code samples from the forum views?

The next App Buidler release allows you to copy text from the welcome page browser. I guarantee you Donald. :)

Hello to all,

PS

This broswer in AB is read only in the forum. At least for me it is, Anyway to make it so we can copy code samples from the forum views?

Donald, update your App Builder copy. The current release allow us to use the contextual menu and also to select text from the welcome page browser.

www.getappbuilder.com

Thanks for all of that David. You da man!

You're welcome! :)

David

For the sake of clarification, and maybe me not knowing the basics here:

url('../images/Background.jpg')

how do you get that path? I mean it looks like you found it with a tool and then pasted it into the code

can you explain the path syntax. ../ what does that signify in AB, it goes back to what base folder, and which base folder.

Does a full path not work here?

I know this is probably obvious but if I get confused the others might also so I am asking for clarification.

Thanks

I have also placed images in the same folder as the icons and when running the app they are deleted.

I see you put the image in that folder. Any idea as to why it deleted them?

Hello Donald,

It's more easy than appear. Taking a look first at the compiled app's directory tree:

When we use the app's file's manager to choose an image (to later use it as the background) such image is copied into the "app/images" directory when the application is compiled. The app's stylesheets, however, are placed in the "app/styles" directory. Then, when we must to refer to an app's image file from an app's stylesheet, we must "up to the parent directory", and this is what is we are doing below in the code:

Such code are placed in an stylesheet in the "app/styles" directory, so we "up to the parent directory" (using the "../") and then enter in the "images" directory to finally choose the "Background.jpg" image file.

I am not able to get the image to display in my app so we must dig further.

Please confirm:

I selected the image using the file manager.

I copied the path using the copy path tool and then went to my view that I want to show the image on and in the style section
put this in the backgroundimage property

url('../images/redwhite.png')

or (I tried both)

url('app/images/redwhite.png')

Is there anything else I must do?

Hello Donald,

If you added a "redwhite.png" image using the app's file's manager (under the Images tab!) then the below code must work:

Are you sure you put that code for the entire app, or, in other words, are you sure you add the code in the right app's view?

Can you provide (attach it here if you wanted) a sample application in order to try here.

Ok problem solved

If you use the copy path feature it will give you this path.

app/images/redwhite.png

You cannot use that. it must be

../images/redwhite.png

I tried that before but was missing on of the ticks :-)

A suggestion for future update is that the copy path use he ../ instead of the app/

Also it was not clear to me that I needed to use the file manager to make this all happen. Now I got it! Yay!

Learning can be painfull but always feels good when it is over..

Thanks

Hello,

No problem Donald. Certainly the file's manager copy the "complete" path because we can use it in Image controls, HttpClient controls, etc. In fact we only need to refer to paths like "../" when use it in CSS styles. However probably I can do something about. In the meanwhile, it's good to know the app's directory tree, where the files, images, etc., are placed, etc. Therefore, forgetting the drawbacks, maybe we can learn something here. :)