image as background

  1. 4 years ago

    ronaldo f

    22 Aug 2015 Pre-Release Testers, Xojo Pro Philippines

    Is it possible to put a wallpaper images as background of a webpage (stretch the whole page)?

    Please help me How to accomplish it.

  2. Michel B

    22 Aug 2015 Pre-Release Testers RubberViews.com
    Edited 4 years ago

    I use this in the demo of RubberViewsWE you can download for study at http://rubberviews.com/rubberviewswe.html

    ' Place in the WebPage Open event.
    'Code to display a picture placed on a server as page background image. Much faster
      self.ExecuteJavaScript("var x=document.getElementById('"+self.ControlID+"'); x.style.backgroundImage = 'url(http://rubberviews.com/pics/bluesky.jpg)'; ")
      

    In that example, I use a picture I have placed on my server.

    If you are using a standalone program, you can also use a WebFile pointing to a local image file, to make it available to the method.

    See http://docs.xojo.com/index.php/WebFile.Open

    PS : May I suggest next time you need to ask questions about Web, you click on Target and select the Web channel ? It is easier to know at first glance which platform it is about.

  3. ronaldo f

    22 Aug 2015 Pre-Release Testers, Xojo Pro Philippines

    Thank you for your reply Michael.

    I tried the sample code you provided but it fires javascript error. I tried to download rubberviews.com samples, its seems its very interesting but while exploring, it fires javascript error. something like below:

    Could not execute returned javascript: Unexpected token var
    Source: var menu = document.getElementById('QTFZo57Pxn'); menu.style.display = 'none' var datemenu = document.getElementById('Vy82XksYtX'); menu.style.display = 'none'

    Im interested to purchase rubberview, but it seems it has to be fixed?

    P.S.
    Sorry about posting location. Im new to here. I will correct my posting the next time.

    Again, thanks you so much!

  4. Michel B

    23 Aug 2015 Pre-Release Testers RubberViews.com
    Edited 4 years ago

    @ronaldoflorendo I tried the sample code you provided but it fires javascript error.

    It would greatly help if you copied all the information from the black JavaScript error dialog and posted it.

    I tried to download rubberviews.com samples, its seems its very interesting but while exploring, it fires javascript error. something like below:

    Could not execute returned javascript: Unexpected token var
    Source: var menu = document.getElementById('QTFZo57Pxn'); menu.style.display = 'none' var datemenu = document.getElementById('Vy82XksYtX'); menu.style.display = 'none'

    This Javascript code is not part of RubberViewsWE JavaScript code. I believe it is part of the framework. It seems to be part of the menu system, but I could not tell you more.

    Just posting part of the error does not help, though. What did you do when you got the error ? It is very important to be specific to find out where a bug may be.

    RubberViewsWE has been thoroughly tested and runs live on my server with the very same code you can download http://rubberviews.com/cgi-bin/rubberviewswe/rubberviewswe.cgi

    Something seems to be wrong on your end. Which version of Xojo are you using, and on which platform ? (I would guess Windows ?). That will enable me to try and reproduce the problem.

  5. Sam R

    23 Aug 2015 Pre-Release Testers, Xojo Pro Hengchun, Pingtung, Taiwan

    Can you insert CSS, if so it's dead simple.

    background-image: url("v5/compatibility/El_Capitan_Large.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat;
  6. Michel B

    23 Aug 2015 Pre-Release Testers RubberViews.com

    @Sam R Can you insert CSS, if so it's dead simple.

    background-image: url("v5/compatibility/El_Capitan_Large.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat;

    The CSS itself is simple enough. Implementation within Xojo Web maybe a tad more intricate. See
    https://forum.xojo.com/23367-tutorial-using-css-in-webapps-to-make-your-webapp-more-beautifu/0

    What the JavaScript I use do, is basically add the style dynamically. I would be extremely surprised the error reported by the OP has anything to do with it.

  7. Michel B

    23 Aug 2015 Pre-Release Testers RubberViews.com

    Here is the WebStyle way :
    - Add this in App.HTML :

    <style>
    .haha { background-image: url("http://rubberviews.com/pics/bluesky.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat; }
    </style>
    • Insert a WebStyle called haha in the project
    • Make haha the style of the WebPage.
  8. Greg O

    23 Aug 2015 Xojo Inc

    @ronaldoflorendo Could not execute returned javascript: Unexpected token var
    Source: var menu = document.getElementById('QTFZo57Pxn'); menu.style.display = 'none' var datemenu = document.getElementById('Vy82XksYtX'); menu.style.display = 'none'

    For what it's worth, the error is in that code segment... Note the "var" that appears after the 'none'. There's supposed to be a semicolon there.

  9. 2 years ago

    Michel B

    4 Jul 2017 Pre-Release Testers RubberViews.com
    Edited 2 years ago

    I have been asked a simpler method to change background image.

    Here is an example project : BackgroundImage.zip

    The two buttons let you switch between two different images that have been dragged into the project.

  10. 2 months ago

    Thomas T

    May 15 Pre-Release Testers, Xojo Pro Europe (Germany, Munich)

    The zip file can't be extracted on my Mac (neither by my own zip code which is x-platform), and it seems to contain the entire .debug, which makes little sense to include.

  11. Tim P

    May 15 Pre-Release Testers Rochester, NY
    Edited 2 months ago

    Though I wasn't able to open with Finder, I use a third party tool for zips that I really do love and it was able to open the zip and extract the project. I've put just the project up and you can download the working zip here:
    https://xojo.io/backgroundimage-25170

    @Michel B if you have any objection, please let me know I will remove it.

or Sign Up to reply!