MBS Xojo Conference
6/7th September 2018, Munich

« Geoff and Thom on REA… | Home | MBS REALbasic Plugins… »

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
15 01 11 - 12:53
No comments

  
Remember personal info?

Emoticons / Textile


Notify:
Hide email:

Small print: All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.