How to set backgound image to Webcontainer and Webbutton

  1. 4 weeks ago

    i am creating an web application.

    i want to set background image to complete container. i am able to set color through Style Property.
    But i am not getting how can add background image.

    i am facing same problem to set background image to a WebButton.

    Can any one tell me how can i set background image to button and container.

  2. Louis D

    Aug 20 Pre-Release Testers, Xojo Pro QC, Canada

    - you cannot set a background image directly on a page or a webcontainer in "straight Xojo" (javascript kings surely can, but this is not generally recommended). I would suggest to use a WebImageView (imagewell) if you really need to do this. Myself, I find background images distracting and prefer to stay away from such designs.

    - The web button cannot have images. There are third party solutions that can offer that. I like GraffitiSuite web controls. But for this specific purpose, I like to use again a webImageView. Set the picture property. Through the style (normal, hover and pressed), I can mimic the behavior of a button. The mouseUp event can be used in place of the action event of a button. Others use a webcanvas to do the same.

  3. Maurizio R

    Aug 20 Pre-Release Testers, Xojo Pro

    Anything can have a background image.
    A background image is a CSS property that you can set using Xojo code but not using the style editor.
    Using CSS you can define size, position, rotation and many other properties of the imahe.
    Look at this thread resizing a web image without redrawing .

  4. Tim P

    Aug 20 Pre-Release Testers Rochester, NY

    @Maurizio R Anything can have a background image.

    "Just because you can doesn't mean you should"

  5. Maurizio R

    Aug 20 Pre-Release Testers, Xojo Pro

    @Tim P "Just because you can doesn't mean you should"

    Is this some form of information related to the question asked on this thread?

  6. Louis D

    Aug 20 Pre-Release Testers, Xojo Pro QC, Canada

    I believe that Tim means that while you can set CSS properties in code with javascript, this is not necessarily a good idea. This is the same warning as my "javascript kings surely can, but this is not generally recommended".

    Yes, I have used javascript in code to restrict numeric entries in a text field for example or to use Google fonts, but I shy away from modifying the UI further. Xojo engineers have warned against this several times. Now, this is one of the things that I am hoping that web API 2.0 will improve. Can't wait to see it.

  7. Norman P

    Aug 20 Pre-Release Testers, Xojo Pro great-white-software.com/blog

    Web 2.0 is what you're waiting for - not API 2.0

  8. Louis D

    Aug 20 Pre-Release Testers, Xojo Pro QC, Canada

    Correct. API 2.0 is desktop/console etc. Web 2.0 is the webapp UI framework. Thank you. I am still looking forward to it, even when named correctly. ;-)

  9. Norman P

    Aug 20 Pre-Release Testers, Xojo Pro great-white-software.com/blog

    API 2.0 will eventually also encompass Web but its not the controls and their capabilities but a consistent set of APIs they present so if you know how to use a listbox on a desktop that the web listbox will, or should be, mostly similar
    And the same fo iOS and console etc

  10. Michel B

    Aug 20 Pre-Release Testers, Xojo Pro RubberViews.com
    Edited 4 weeks ago

    @chetana n i want to set background image to complete container. i am able to set color through Style Property.
    But i am not getting how can add background image.

    i am facing same problem to set background image to a WebButton.

    Although I am one of those "JavaScript kings" Louis Desjardin alluded to, I suggest to use the controls available in Xojo.

    Use an Image Well (technically a WebImageView) on the bottom of the Webcontainer to host the picture. Lock it on all sides so it sticks with any size.

    Instead of using a WebButton and try to feed it an image, you can use an Image well as button, with a Weblabel on top of it if you need text.

    Unless you are competent in JavaScript, it is better to stick with built in controls to ensure maintainability of your programs, especially in light of Xojo's Web 2.00 coming our way.

    That said, programming is always an exercise in aesthetics as well as engineering. The web has considerably evolved, and what was acceptable in yesteryears appears today old and out of place. Adding pictures to buttons is commonplace on the web, and I frankly do not see what it should not be done.

  11. Tim P

    Aug 20 Pre-Release Testers Rochester, NY

    @Michel B Adding pictures to buttons is commonplace on the web, and I frankly do not see what it should not be done.

    Do you have a source? I don't think this is correct. I see more symbology from FontAwesome than I see actual picture images.

  12. Michel B

    Aug 20 Pre-Release Testers, Xojo Pro RubberViews.com

    Indeed lately FontAwesome has gained popularity, but yet there are a lot of sites still using clip art of pictures. My point was not to say it should be done, but rather, that it should not be forbidden.

    License to create is the basis for evolution.

  13. Maurizio R

    Aug 20 Pre-Release Testers, Xojo Pro

    @Tim P I see more symbology from FontAwesome than I see actual picture images.

    Exactly something that's available in Xojo...

    @Michel B License to create is the basis for evolution.

    This is the best part!

  14. Louis D

    Aug 20 Pre-Release Testers, Xojo Pro QC, Canada

    Pictures can be full color, or simple line drawings. Pictograms and symbols on (imageview) buttons are very useful especially in multi-lingual applications and where a picture saves a lot of screen space. I am not too found of FontAwsome free icons, although some of the paid collection is pretty nice. I use other high quality icons. I prefer line drawing icons for a very light, "aerial" look and feel. (one example of such icons is Axialis line icons) Aesthetics is definitely very much debatable. One can state preferences, but I am not certain one is better than the other.

or Sign Up to reply!