B4J Question Set Background Image in B4J NonUI

Dogbonesix

Active Member
Licensed User
Longtime User
How do I set a background image in B4J. It is a no brainer when one has a form to address as in B4A/B4X - but I haven't figured it out in B4J/HTML. I am creating a WEB app beta.grok6.com and would like to set a background image. I can set a background color - easy. Any help appreciated.
 

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
i guess you are using css? just follow here:
 
Upvote 0

Dogbonesix

Active Member
Licensed User
Longtime User
I'm using whatever will get me a background. In Main.css I added:

body {
background-image: src='/images/gork_splash.png;
background-color: #cccccc;
}

.blacktext{
color:#000000;
text-decoration:none;
}

Black text works as expected.

I am not sure about the URL but src='/images/... works for other images.

And then how do I use a different image for a different page in B4J?

Coffee no problem.
 
Upvote 0

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
background-image: src='/images/gork_splash.png;
as the link i share says you should change it too: background-image: url("/images/gork_splash.png")

And then how do I use a different image for a different page in B4J?
call another css i guess, if you want to follow this path you will need to learn html basics
 
Upvote 0

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
b4j server is as any other server on the internet, even php, or static html pages. this is because at the end, the browser is the one interpreting the data.

So you dont have to look for b4j specific html topics, you can serve html + css + js as with any other webserver.
 
Upvote 0

Dogbonesix

Active Member
Licensed User
Longtime User
main (css) was corrected to:

body {
background-image: url("/images/grok_splash.png")
background-color: #cccccc;
}

Still no background.

Thanks for your perseverance and quick response.
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
dynamic code jquery:

JavaScript:
$(document).ready(function(){
   $("body").css("background-image", "url('/images/grok_splash.png')");
});

tips:
 
Upvote 0

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
url("/images/grok_splash.png")
okey, may be you are missing a linein b4j like:
B4X:
server.StaticFilesFolder = File.DirApp & "/www"

this makes the root of your website the folder /www

then if your image is in
{your project folder}/objects /www/images/grok_splash.png
you will write
/images/grok_splash.png

that means that /www will become / in your webapp.
 
Upvote 0

Dogbonesix

Active Member
Licensed User
Longtime User
Finally - It works as below:

<!DOCTYPE html>
<html>
<head>
<title>Grok Login</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- Google Hosted Library for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").css("background-image", "url('/images/grok_splash.png')");
});
</script>


Also, this line is in B4J
File.MakeDir(File.DirApp, filesFolder)

It may work other ways - but the above works.
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
Finally - It works as below:

<!DOCTYPE html>
<html>
<head>
<title>Grok Login</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- Google Hosted Library for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- B4J WebSockets client library -->
<script src="/b4j_ws.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").css("background-image", "url('/images/grok_splash.png')");
});
</script>


Also, this line is in B4J
File.MakeDir(File.DirApp, filesFolder)

It may work other ways - but the above works.
a little correction.
Jquery already has it declared.

HTML:
<html>
<head>
    <title>Grok Login</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <!-- Google Hosted Library for jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <!-- B4J WebSockets client library -->
    <script src="/b4j_ws.js"></script>
    <script>
        $(document).ready(function() {
            $("body").css("background-image", "url('/images/grok_splash.png')");
        });
    </script>
</head>
<body>
</body>
</html>
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
and you can add this for responsive pages on mobile browsers

Head:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
Upvote 0
Top