Simple change of Background Color to Background Image...

JMartin · Apr 8, 2016

So what I want to do is simply replace the solid colored background of the login.htm file in the "WWW" folder to reflect a picture instead.

I'm no HTML or CSS expert, but I know my way around notepad, and can insert a tag in the right place.

I've used the "background" tag, the "background image" tag, and when I open the login.htm file in my browser directly (chrome) it works.
But if I try to access the login screen through the server (using the IP address), or if I try to access that screen remotely (say... from work), all I get is the solid color again.
I can change the color, and that works, but for the life of me, I cannot get an image to be used as the background.

What am I missing here?
Anyone have any thoughts or suggestions?

nayr · Apr 9, 2016

use a relative path for the image..

ie: images/background.png

instead of:
/images/background.png
http://host/images/background.png

JMartin · Apr 10, 2016

nayr,
Thanx, but I've tried every possible path... Absolute, Relative, "%20" for spaces, forward-slash, back-slash, I've even gone so far as to place copies (thinking it was a simple path problem) of the "home.jpg" background image in every conceivable location.

It's not that the login.htm file can't find it... if I open the file locally with File://blah blah it works fine... it's that the BI web server won't serve it.

This one has got me stumped.

nayr · Apr 10, 2016

put it on another server then and give it full path.. put it on like imageur

JMartin · Apr 10, 2016

Ugh. Thanx that worked.

Which of course begs the question... Why?

It's my image, it's in my BI www folder, permissions are granted (Win-10), but why won't the Blue Iris Web Server, serve it?
Problem solved... just not happy with the solution.

nayr · Apr 10, 2016

the bi web server is ment for BI, I suspect its not designed to host custom files.. only its own.

JMartin · Apr 10, 2016

Yet we have a huge thread entitled, "I made a better remote-live-view web page" which includes dozens of upgraded pages and scripts...

I just thought inserting a simple .jpg file as the background of a default web page would be a simple task.
Oh well.

bp2008 · Apr 13, 2016

JMartin said:
Yet we have a huge thread entitled, "I made a better remote-live-view web page" which includes dozens of upgraded pages and scripts...

I just thought inserting a simple .jpg file as the background of a default web page would be a simple task.
Oh well.

Sorry, I didn't see this thread. What you ask is easy for any page except login.htm. Blue Iris won't send any file except login.htm until you have logged in, which is probably why it has been failing.

Here is what you can do. Go to http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Upload the image you want to use as a background. They will convert it to something called a "Data URI" which lets you embed an image as text so it will appear on the login page without having to be hosted elsewhere.

Now open the login.htm page and find the <body> element. Add a style attribute like this:

HTML:

<body style="">

Now in that web page where you created the Data URI, scroll to the section "As a CSS background image". Copy the entire line that starts with "background-image:" and paste it inside the quotation marks in your body element.

Of course this will come out as a tiled image so you may want to include other CSS rules, like "background-repeat: no-repeat;"

Separate all style rules with a semicolon. You can find more related rules here: http://www.w3schools.com/cssref/css3_pr_background.asp

JMartin · Apr 13, 2016

It is working now with nayr's workaround, but I really like your idea... I'll give it a try.
Thanx,

Jim

Search

Simple change of Background Color to Background Image...

JMartin

Getting the hang of it

nayr

JMartin

Getting the hang of it

nayr

JMartin

Getting the hang of it

nayr

JMartin

Getting the hang of it

bp2008

JMartin

Getting the hang of it