Background image on radvert.html

mikedod · Tue Jan 16, 2024 11:57 am

Hi all,

I wonder if someone could help me.
I am trying to put a background and an image on the radvert.html but it looks like i am missing something as it looks like the path is wrong.
I have uploaded the images in the img folder.
While on the PC when opening the html looks fine, when it comes at the mikrotik it doesn't show any image or background.
below is the html.
Thank you in advance

<html>
<head>
<meta http-equiv="refresh" content="2; url=$(link-orig)">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<title>mikrotik hotspot > Wellcome to @Freewifi</title>
<style type="text/css">
body {
background-image: url("img/CaptureBackG.JPG");
}
>

</style>

<script language="JavaScript">

</script>
</head>
<body onLoad="openAdvert()">

<p style="text-align: center"><img align="center" border="0" hspace="0" src="img/Capture.jpeg" style="height: 321px; width: 505px" /></p>

<table height="100%" width="100%">
<tbody>
<tr>
<td align="center" valign="middle"><span style="font-size: 48px">Wellcome to @Freewifi.<br />
<br />
Wellcome </span><span style="font-size: 48px"><span><a href="$(link-redirect)" style="font-size: 48px" target="hotspot_advert">Click here to connect CONNECT</a></span></span><span style="font-size: 48px"> manually.</span></td>
</tr>
</tbody>
</table>
</body>
</html>

rextended · Tue Jan 16, 2024 12:29 pm

CaptureBackG.JPG
Capture.jpeg

Check exact file names, is case sensitive.

(Wellcome on english is only with one "L" I suppose...)

mikedod · Tue Jan 16, 2024 1:17 pm

Thank you for that, yes I am a bit dyslexic

I am running the same images on the login.html and works fine, and I have the same path on the html, same names, and the 2 html are at the same location.

That's why i don't understand what is wrong.
Below is part of the script from the login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>my own hotspot login Hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {
color: #EF8E00;
font-size: 10px;
font-family: verdana;
background-color: #000000;
background-image: url("img/CaptureBackG.JPG");
}

textarea,input,select {
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #EC9103;
border-top-color: #FFFFFF;
}

a, a:link, a:visited, a:active {
color: #0000CC;
text-decoration: none;
font-size: 10px;
background-color: #000000;
}

rextended · Tue Jan 16, 2024 2:44 pm

I do not know well css, but one section replace another?

You have two time "body" on css, move the background line on the body section, and remove duplicate body at the start:

probably correct css code

<style type="text/css">
<!--
textarea,input,select {
background-color: #FDFBFB;
border: 1px #BBBBBB solid;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}

body{ color: #737373; font-size: 12px; font-family: verdana; background-image: url("img/CaptureBackG.JPG"); }

a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 12px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 12px; color: #7A7A7A; }

-->
</style>

mikedod · Tue Feb 27, 2024 1:54 pm

Hi all, I fixed a bit the script as below.
I wonder if someone can test and tell me what is wrong.
I don't get to see an image on this one while the file is running on the mikrotik, when running on the PC is fine. On the mikrotik is like the path for the image is wrong.
I added the image in all the folders just in case and also changes the path on the script each time but still the same.
To me the script looks fine, just wondering if someone could help. Attached are the hotspot files that they show the location of the image.
This is the radvert.html that pops up when setting advertisement on the hotspot.
Thank you in advance

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="2; url=$(link-orig)">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<title>mikrotik hotspot > advertisement</title>
<style type="text/css">

</style>
<script language="JavaScript">

</script>
</head>
<body onLoad="openAdvert()">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle"style="font-size: 70px">
Would you like to continue browsing?
<br><br>
<a href="$(link-redirect)" target="hotspot_advert" align="center" valign="middle"style="font-size: 70px">YES</a>
<br>
</td>
</tr>
</table>
</body>
</html>

jaclaz · Tue Feb 27, 2024 3:06 pm

SIngle quotes vs. double quotes?

mikedod · Wed Feb 28, 2024 11:36 am

not good at all with this i changed the quotes but still the same.

Wed Feb 28, 2024 11:42 am

Find a webdesigner that can help. There are lots of HTML and CSS mistakes.
Also you should be debugging from the OUTPUT, not from your source. Router will modify values based on your variables, maybe some quotes are removed etc. Use "View source" or "Inspect element" in the browser when this page is actually shown to the user. Then you will see mistakes better.

mikedod · Wed Feb 28, 2024 1:55 pm

Thank you!