Bootstrap and background

Hi,

When I set css background of the form/html like this:

body {
  background-image: url("images/background.jpg");
}

it doesn't work ... I have to do some workaround by deleted form/span style attribute background-color: white.

I think that "background-color: white" is created as default in style, when the form is created.

Can you do something with this issue?

Regards,


We have applied an improvement that when ElementClassName is set, it will not preset the background color. This improvement will be in the next update.

Ok ... perfect

Hi,

It still doesn't work ... get my example from https://appmaster.pl/tms.

You need to add background.png to your project, then this PNG gets deployed to the output folder.
This was indicated in the browser console.
If you experience an issue, the browser console is the first place to look to see if there is an issue.


Hi,

Did you run my example?

1) in browser console(chrome) I have only error favicon.ico not exists
2) I forgot add background.png to TMSWeb\Debug but now it was corrected (was upload to https://appmaster.pl/tms).
3) Background set is in style css in Project1.html like below:
<style>
      body{
        background-image: url("background.png"); /* The image used */
        background-color: white; /* Used if the image is unavailable */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
        background-attachment: fixed;
      }
    </style>

4) The background is ok on Form1 but when you click button and open form2 the background is white although ElementClassName on form2 was set.

What's wrong?

I DID run your project.
As soon as I added the background.png to the project, it got deployed in the output folder and the background was used in the main form.

Point 4 ... when you click button on form1 the form 2 is showing ... the ElementClassName was set but span which in fact is form2 still has background-color: white. Background image is set globaly in css ... like in previous post.

Why form2 has forced background-color: white ? You said that when I set ElementClassName for form this disappear from style attribute.

<span style="top: 0px; left: 0px; right: 0px; bottom: 0px; user-select: none; position: absolute; background-color: white;">
<span class="fakeclass" style="z-index: 9999; box-shadow: silver 3px 3px 3px;">
 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>TMS Web Project</title>
    <style>
    </style>
 
</span>
</span>

It is not form2 that has a white background color. When a new form is displayed, this is always displayed on top a window wide SPAN (to prevent clicks on controls of the form showing the new form).
It is as such this span that is white here while your CSS is only modifying the BODY element settings.

You are right ... but outer SPAN is generated by your building process ... what can I do with this ... I think that if you have two nested SPANS ... mayby you should check this situation and when in child SPAN css class is set you should in parent SPAN delete bacground-color: white;?

Btw I have to stay with my workaround, I publicate this maybe it helps somebody with the same problem:

procedure TdmDataModule.modifySpan;
var spanList:TJSHTMLCollection;
    i:Integer;
    tmpstyle:string;
begin
  spanlist:=document.getElementsByTagName('span');
  for i:=0 to spanList.Length-1 do
    begin
      tmpstyle:=TJSElement(spanlist).getAttribute('style');
      if(tmpstyle<>null)then
        begin
          tmpstyle:=StringReplace(tmpstyle,' background-color: white;','',[rfReplaceAll]);
          TJSElement(spanlist).setAttribute('style',tmpstyle);
        end;
    end;

end;