Add a background pattern/image to a webpage with REAL Studio Web Edition

Here a code snippet to set the background image of a webpage. The key is to create a WebPicture object, so you have an URL to use for the image. Second you need to use javascript in order to apply the image to the right object. This is a little bit difficult as the id of this window background div is a random character sequence. But there is the parent div with id "REALContainer" and this way we can find it. Try it yourself:

Shared Background As WebPicture

Sub Open()
  if Background = nil then
    
    // find the picture
    dim folder as folderitem = GetFolderItem("")
    dim file as folderitem = folder.Child("background.png")
    
    // walk up the folders until we find the file
    while file.Exists = false
      folder = folder.Parent
      file = folder.Child("background.png")
    wend
    
    // load picture
    dim p as picture = picture.Open(file)
    
    // create a webpicture. this is shared with all webpage1
    // objects in all sessions as we make it a static variable
    Background = new WebPicture(p, Picture.FormatJPEG)
  end if
  
  // Apply picture by changing style to the
  me.ExecuteJavaScript "document.getElementById('REALContainer')."+_
      "childNodes[1].style.backgroundImage = 'url("+background.url+")';"
  
End Sub

Download example project:

backgrounds.zip The biggest plugin in space...