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 ?

Re: Background Image

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:

background-image: url('w3css.gif');

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:

background-image: url('app/images/w3css.gif');

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.

Re: Background Image

Hello Donald,

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

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

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:

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:

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

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.

Re: Background Image

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.