Does anyone know a way to set the background image in a web page? Normally I would add “background=image.png” to the body tag but there doesn’t seem to be anyway to access the body tag. The WebHTMHeader is inserted after the body tag so it doesn’t help much.
Thanks in advance.
A WebPage in Web Edition doesn’t correspond to a “web page” in the browser. The Session is what actually corresponds to a browser “web page”, and that browser “web page” pages in WE WebPages as needed. To do a background image, you’ll probably need to put a WebImageView on each of your WebPage subclasses unless you want them to share an image. Studio Stable Web Essentials has a class for this, WEScaledImage. You can test it here:
http://www.studiostable.com/webessentials/demonstration
Click “#3” top left, then “Scaled img” top right. The background is an image scaled to fill the page.
You could also do what you want with a little Javascript. Find the body tag, set its background.
I have used the WebPageSource control to add a page background, setting location in the Inspector to ‘Before Content’ then adding the HTML code in the EditSource event handler, referencing an image stored as a property of the WebPage. It seems to work well with all browsers that I have tried, even IE6. With a bit of additional HTML it will do tiled images as well. Or else use Javascript.
If you want scaling then Brad has already given the answer.
There is a feature request in Feedback from a couple of years ago <https://xojo.com/issue/16576> asking for background images to be available in the WebStyle object, which would things much easier.
I also use a WebPageSource control, with this Html code in the “Source” field of the Inspector the background image will scale to fit the page:
[code]
#bckg {
background:url(“http://LINK_TO_THE_BACKGROUND_IMAGE”);
no-repeat center center;
min-height:100%;
background-size:cover;}
body{min-height:100%;}
}