TheBackShed.com

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

Author

Message

OA47

Guru

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

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: 11974

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: 1054

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: 11974

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

OA47

Guru

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

Posted: 10:40pm 08 Oct 2026

Copy link to clipboard

Print this post

Thankyou maxwellaou for noticing my typo using the underscore instead of the minus and Peter for pointing out I need a double opening curly bracket, now the background colour does change but I still cannot get the .jpg file to load as a background. I have spent way too long without success to get the background file to load. The .jpg file is around 100k in size, is there a size limit or is the problem because the file is local?

OA47

phil99

Guru

Joined: 11/02/2018
Location: Australia
Posts: 3407

Posted: 12:36am 09 Oct 2026

Copy link to clipboard

Print this post

Is any of this relevant?

b7 manual p96 said Sending an Image
You can insert an image in your web page using the following html code <img src="pix.jpg"/>. When the remote browser reads this it will send the following request GET /pix.jpg HTTP. You can then send the requested image using the code shown in bold:
s$ = LGetStr$(buff%(), p% + 4, t% - p% - 5)
IF s$ = "/" THEN
WEB TRANSMIT PAGE a%,"index.html"
ELSE IF s$ = "/page2.html" THEN
WEB TRANSMIT PAGE a%,"page2.html"
ELSE IF s$ = "/pix.jpg" THEN
WEB TRANSMIT FILE a%,"pix.jpg","image/jpeg"
ENDIF
Note that pix.jpg must be a jpeg image residing in the default directory of the internal flash filesystem or SD card. The WebMite is not a fast server so small and simple images are preferred.
The "image/jpeg" parameter is known as a MIME type and there are many different types, other common image types are image/bmp, image/png, and image/gif.

TassyJim

Guru

Joined: 07/08/2011
Location: Australia
Posts: 6623

Posted: 06:51am 09 Oct 2026

Copy link to clipboard

Print this post

Your code is almost right.
double up on the {{
put the jpg in the same folder as your index.html for now

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

Your code that processes requests needs to handle jpg.

This the the usual sub I use to cover most files trpes I am likely to use.

Sub gotrequest
Local p%, t%, a%, s$, i, nparams, page$, page_ext$, cons$, newfolder$
Local arg$(1,maxargs-1), endtime
WatchDog hw 8000
For a%=1 To MM.Info(max connections)
If Not MM.Info(TCP request a%) Then Continue For
LongString clear Buff%()

WEB tcp read a%,Buff%()
' longstring print Buff%()
If LLen(Buff%()) Then
page$=parsehtmldata$(nparams,Buff%(), arg$())
print page$
' if page$ = "" then page$ = html_def$
If Instr(page$,".") Then
page_ext$ = LCase$(Field$(page$,2,"."))
Else
page_ext$ = ""
EndIf
If MM.Info(FILESIZE page$) > 0 Then ' file does exist.

Select Case page_ext$
Case "html", "htm"
WEB transmit page a%,page$
'case "htm"
' WEB transmit File a%,page$,"text/html"
Case "ico"
WEB Transmit FILE a%,page$,"image/vnd.microsoft.icon"
Case "jpg"
WEB Transmit FILE a%,page$,"image/jpeg"
Case "png"
WEB Transmit FILE a%,page$,"image/png"
Case "gif"
WEB Transmit FILE a%,page$,"image/gif"
Case "bmp"
WEB Transmit FILE a%,page$,"image/bmp"
Case "js"
WEB transmit file a%,page$,"text/javascript"
Case "txt", "csv", "bas"
WEB transmit file a%,page$,"text/plain"
Case "csv"
WEB transmit file a%,page$,"text/csv"
case "py"
WEB transmit file a%,page$,"text/x-python"
Case "css"
WEB transmit file a%,page$,"text/css"
Case "cgi"
WEB transmit file a%,page$,"application/x-httpd-cgi"
Case ""
WEB transmit file a%,page$,"text/plain"
case "pdf"
WEB transmit file a%,page$,"application/pdf"
Case Else
WEB transmit file a%,page$,"text/plain"
End Select
Else
WEB transmit page a%,"notfound.html"
syslog "404 "+page$
WEB transmit code a%, 404
EndIf
Else
syslog "no data"
EndIf

Next a%

End Sub

The image might be too big. Try with a small image first to be sure.

Edit: Working program with background image.
testweb.zip

Jim
Edited 2026-10-09 17:07 by TassyJim

VK7JH
MMedit

Print this page

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