image as background

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

Please help me How to accomplish it.

I use this in the demo of RubberViewsWE you can download for study at RubberViewWE 2.00 : One size fits all !

' 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://documentation.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.

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!

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

[quote]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’[/quote]

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.

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;

[quote=209014:@Sam Rowlands]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.

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.

[quote=208983:@ronaldo florendo]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’

[/quote]
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.

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.

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.

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 Bujardet if you have any objection, please let me know I will remove it.