B4J Question Set Background Image in B4J NonUI

[Dogbonesix]

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]

i guess you are using css? just follow here:

CSS background-image property

Set a background-image for the <body> element.

www.w3schools.com

 

[Dogbonesix]

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.

 

[EnriqueGonzalez]

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

HTML Styles CSS

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

www.w3schools.com

 

[EnriqueGonzalez]

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.

 

[Dogbonesix]

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.

 

[TILogistic]

dynamic code jquery:

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

tips:

jQuery Tutorial

jQuery greatly simplifies JavaScript programming.

www.w3schools.com

 

[EnriqueGonzalez]

url("/images/grok_splash.png")

okey, may be you are missing a linein b4j like:

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.

 

[Dogbonesix]

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.

 

[EnriqueGonzalez]

thanks for the coffee!

 

[TILogistic]

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

 

[TILogistic]

and you can add this for responsive pages on mobile browsers

Head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">