TheBackShed.com

Forum Index : Microcontroller and PC projects : I need html help

Author

Message

OA47

Guru

Joined: 11/04/2012
Location: Australia
Posts: 1053

Posted: 06:05am 08 Oct 2026

Copy link to clipboard

Print this post

I cannot get a background jpg file or color to appear on a simple web page set up on the a: drive of the pico webmite (MM.VER=6.0201). I can LOAD JPG to the LCD screen so I am sure the filename and data are correct.
Here is some code:

<html>
<head>
<title>WEBMITE TEST PAGE</title>
<style>
body{
background_color: #F4F4F4;
background-image: url('A:/VanRear.jpg');
}
</style>
</head>
<body>
<h1>HEADER 1<h1>
</body>
</html>

Hopefully some one can see the errors of my ways.

OA47

matherp
Guru

Joined: 11/12/2012
Location: United Kingdom
Posts: 11967

Posted: 06:44am 08 Oct 2026

Copy link to clipboard

Print this post

Manual page 97

Quote Inserting Data in the Web Page
Usually you need to insert data generated by the BASIC program in the web page that is transmitted. This is
easily done by inserting the name of the BASIC variable surrounded by curly brackets (ie, { and }) into the text
of the web page.
For example, if your program had a variable called CurrentTemp which had the value of 24 and represented
the current temperature, the following web page: The temperature is {CurrentTemp} would display in
the client's browser as: The temperature is 24.
The identifier between the curly brackets can be a float, integer or string, an array element and even an
expression (ie, A + B). You can also use functions, so if you wanted to format a floating point number with the
correct number of decimal places, etc you could use the formatting function Str$(). Note that an error in the
expression will cause a corresponding error when the WEB TRANSMIT PAGE command is executed.
If you need to use an opening curly bracket in your web page you can use two as a pair (ie, {{) and that will be
changed to a single opening bracket. A closing curly bracket without an opening partner will be untouched.

maxwelloau

Newbie

Joined: 31/10/2025
Location: Australia
Posts: 7

Posted: 06:55am 08 Oct 2026

Copy link to clipboard

Print this post

The CSS is close, but background_color isn’t a valid CSS property—it should be background-color. Also, A:/VanRear.jpg is a local drive path, so it likely won’t load for anyone else viewing the site. Put the image in your project and use a relative path:

body {
background-color: #f4f4f4;
background-image: url("images/VanRear.jpg");
}

Adjust images/VanRear.jpg to match the image’s location in your project.
-----------------------------------------------------------
I don't claim to know this, I just asked the automatic helper. 20 years ago I did some Html, all forgotten!

Gizmo

Admin Group

Joined: 05/06/2004
Location: Australia
Posts: 5199

Posted: 06:58am 08 Oct 2026

Copy link to clipboard

Print this post

The "A:/VanRear.jpg" is not a valid url from the browsers perspective.

OK, I haven't played with the web mite to really know, but on a web server, to send a file thats not in the web folder folder ( htdocs, wwwroot, etc ), you set up a virtual folder in the web server config, so in your case 'A:\' would be aliased as \htdocs\A. Then background-image: url('/A/VanRear.jpg'); would work.

The other option is to convert the image into base64 and embed it into the page. eg

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QLcRXhpZgAATU0AKgAAAAgABAE7AAIAAAAGAAABSodp
AAQAAAABAAABUJydAAEAAAAMAAACyOocAAcAAAEMAAAAPgAAAAAc6gAAAAEAAAAAAAAAAAAA

etc lots of times

tPFFFeWz0kOFU9VvJbO1Dw7dxOMkZxRRRD4kKXws5mWaSeTfM5dj3Jph60UV7K0R5T3G0hoo
qhBSUUUxCGk7UUUxDaKKKYCUlFFAhDRRRVCG9qKKKYhKSiimIQ9aSiigBKQ0UVQgNJRRQhCG
kNFFMQlFFFMD/9k=" width="820" height="100" border="1">

In a style, that would be...
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...');

Glenn

The best time to plant a tree was twenty years ago, the second best time is right now.
JAQ

OA47

Guru

Joined: 11/04/2012
Location: Australia
Posts: 1053

Posted: 08:17am 08 Oct 2026

Copy link to clipboard

Print this post

Peter, am I to assume from your reply that what I am trying to do is not possible?
I have been able to pass variable and operations to and from the MMBasic program but thought I might be able to enhance the presentation of the data.

@maxwellaou, I did try to move the .jpg file to a /images subdirectory but still nogo.

@Glenn you went way over my head with the base64 example but thankyou to all for the responses.

OA47

matherp
Guru

Joined: 11/12/2012
Location: United Kingdom
Posts: 11967

Posted: 08:26am 08 Oct 2026

Copy link to clipboard

Print this post

You just need to double the opening curly bracket as per the manual entry

Print this page

To reply to this topic, you need to log in.