How to change background image?

[Dirk Geppert]

Hello,
how can you change the background image, that is loaded from media/background.png afterwards?

I've tried it with:

Code: Select all

! document.body.style.backgroundImage = "url('https://www.purebasic.com/img/bg-page-header.jpg')";

but nothing happened.

Anyone can help?

Greetz Dirk

[Peter]

No problem here. Works as expected.

[Dirk Geppert]

Yeah, right. I had tested it within a larger project and didn't notice that the code line was not processed at all.

In this context I still noticed, how can you set a window transparent, that was opened with OpenWindow()?
Or is it possible, like SetWindowColor() to set a background image in a window?

Greetz Dirk

[Peter]

In this context I still noticed, how can you set a window transparent, that was opened with OpenWindow()?

Code: Select all

OpenWindow(0, 100, 100, 320, 200, "Window 0 - Resizable", #PB_Window_SizeGadget)
OpenWindow(1, 500, 100, 320, 200, "Window 1")
OpenWindow(2, 100, 400, 320, 200, "Window 2")

WID = WindowID(1)

! $(v_wid.window).find(".spiderwindow").css("background", "transparent");
! $(v_wid.window).find(".spiderwindow-content").css("background", "transparent");

[Dirk Geppert]

Thank you Peter!

Regarding to the background image, I noticed that it is just placed over the existing image.
You will see it, if you change the style to "no-repeat".

Code: Select all

Procedure SetBackgroundImage (Url.s, NoRepeat = #False)
  Protected Size.s
  Url = "url('" + Url + "')"
  
  If NoRepeat = #True
    If ExamineDesktops()
      Size = Str(DesktopWidth(0)) + "px " + Str(DesktopHeight(0)) + "px"
    EndIf
    
    ! document.body.style.backgroundRepeat = "no-repeat";
    ; ! document.body.style.backgroundSize = v_size;
  EndIf
  
  ! document.body.style.backgroundImage = v_url;
EndProcedure
;
Procedure CloseWindowEvent()
  Debug "Closing window: " + EventWindow()
  CloseWindow(EventWindow()) ; Close the specific window
EndProcedure

OpenWindow(0, 100, 100, 320, 200, "Window 0 - Resizable", #PB_Window_BorderLess)

SetBackgroundImage ("https://www.purebasic.com/img/bg-page-header.jpg", #True)

BindEvent(#PB_Event_CloseWindow, @CloseWindowEvent())

Does this mean that changing the background several times can result in memory overflow?

[Peter]

Does this mean that changing the background several times can result in memory overflow?

no. With your code, you set the background of the body-Element. SpiderBasic sets the background of the html-Element.

To change this, you have to write something like this:

Code: Select all

! $("html").css("background-image", "url('https://www.purebasic.com/img/bg-page-header.jpg')");

[Dirk Geppert]

Ah, I see. Thanks for explaining.