Creating a tiled background on a web page

Targets Web
1

I know this has been discussed, but the solutions I’ve tried are evidently before this big change to Web 2.0 (or I just implemented them incorrectly). I have done this on the Desktop with
pbrush.Mode = PictureBrush.Modes.Tile
I’ve tried to do it as a style on a web page and in a canvas, but, as the docs suggest, background-image isn’t supported. I’ve tried css in the HTML header, assuming the body tag would be analogous to a Xojo web page (don’t know that this is so).
Has anybody successfully used a tiled background on a web page in the last year or two?

Is the body tag the thing I should be using for a web page?

Thank you
fritz

2

It’s not. The web framework pushes individual div tags down and assembles WebPages within those so they can be easily shown and hidden as necessary, without having to reload the entire page. I don’t remember if pages have any distinguishing attributes other than their ID (which is random and created at runtime) but you could create a “control” using the websdk that you would place on a page which has no width or height and just serves to add a css definition for the page’s div tag. This is all hypothetical though as I’m away from my computer for the night.

3

It’s actually really easy to do for Web. Add this method to a module:

Public Sub TileBackgroundImage(extends page as WebPage, url as String)
  page.Style.Value( "background-image" ) = "url(" + url + ")"
End Sub

Call like this from a WebPage’s Shown event (Shown not Opening in case the framework decides to reset the styling):

self.TileBackgroundImage( "https://picsum.photos/200/300" )
4 Likes
4

Anthony

There is no external web server associated with this project. I’ve never been able to use graphics on a Xojo web project except with the Image Viewer control, but this is what I tried:

Var picFile As FolderItem = SpecialFolder.Documents.Child(“Development/XOJO”).Child(“cork-board.png”)
dim pic as string
pic = picFile.name
self.TileBackgroundImage( pic )

The graphic ‘cork-board.png’ is in the root of my project folder, which is called “XOJO”.

I evidently can’t use a URL, I tried using the internal representation of the file one gets when one uses “insert” from the Xojo IDE menu. So I figured I’d try SpecialFolder. I get no errors, but no image either. I can’t use “g” or “DrawPicture”, so I can’t even get a single representation of the image onto a page, much less a tiled one.

Obviously, it’s not your code, it’s my ignorance of using images on Xojo Web. I can do it with PHP all day, but I’m missing something here. If you know of any tutorials that address this issue, please let me know. I’ve gone through the videos and what I see in the docs and, though there’s plenty of information, the mechanics of just making an image show up seems in short supply. Ditto for the WebCanvas. I can use the Desktop Canvas just fine. The WebCanvas seems to be way different.

I’m using Xojo 2023 Version 1.1 on a Macbook M1.

Thank you in advance for any aid you might provide.
fritz

5

Greg

I never read an explanation (about the ‘div’ tags) like this before. The rest of the difficulties with CSS start to make sense when you look at it this way. It sounds a little like the way Flutter renders a web page.

Thanks very much for saving me a lot of time trying to ‘map’ CSS tags to Xojo elements.

fritz

6

If you want to use the WebImageViewer, you need this code in the opening event:

Me.Style.Value("background-repeat") = "repeat"

For example, I downloaded a soccer ball png, add that to ImageViewer:
image

because it is too big, I used this code on Opening event:

Me.Style.Value("background-repeat") = "repeat"
Me.Style.Value("background-size") = "100px 100px"

and the result is:
image

Now back to your code:
You should use the editor on the forum to make it a code area or put this before/after your code:
image

I guess your ‘pic’ needs to be a property of the page and not a local property. Also, check if your Web application will run on Linux and you are developing with Mac/Windows as the SpecialFolder may change. Usually, I see the use of the Resources folder for Web.

7

You don’t need an external server or a WebImageViewer. You can use a WebFile. Add a property to your WebPage:

Private Property backgroundImage As WebFile

In your WebPage’s Opening event:

var f as FolderItem
'// Populate your FolderItem with a valid file
backgroundImage = WebFile.Open( f )

Then in the WebPage’s Shown event:

self.TileBackgroundImage( backgroundImage.URL )
1 Like
8

The problem here is that you’re using a FolderItem and passing the string of its name. That’s not a fully-qualified URL. WebFile is designed to get from a FolderItem to a serveable resource.

9

I don’t recommend this method because I’ve seen the framework change or ignore z-index (and not all Web controls support parenting) and the WebImageViewer may end up on top of the other controls. This may not be an issue now, but I saw it in previous versions and it may come up again.

10

Thank you Anthony.

I’m not suggesting using a WebImageViewer to show a Page Tile background image. Just showing what a CSS value can do on one.

If someone decides to use a WebImageViewer with a background image and put other controls over it (parent or not), it is recommended that they participate in the pre-release testing program and make sure that their apps work correctly before the next release ships. That could help prevent issues from coming up again.

11

Nailed It!

I obviously have a lot to learn about web graphics (and folderitems). I was looking at that “Webfile” because it’s always coming up in the docs, but for the life of me I couldn’t figure out what to do with it. I wouldn’t have come up with that backgroundImage property no matter how long I plugged away at this turkey.

Thanks very much, Anthony, for your efforts. Without css, I would’ve been sitting here for months trying to do a tile that is really quite straightforward on the desktop.

fritz

1 Like
12

Alberto

After I implemented Anthony’s code, I had a need to stretch a graphic across the top of the page, and your code came in mighty handy.

Your advice on the SpecialFolder is also well taken. I moved all my images inside the project folder and made a path from the Documents folder that seems to work fine, but I am taking this whole app to Linux in a week or two so we’ll see if everything maps. If it doesn’t, I guess I know where to look first.

Thanks very much for your contribution.

fritz

1 Like