Page 1 of 1

How to change background image?

Posted: Thu May 14, 2020 6:50 am
by 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

Re: How to change background image?

Posted: Thu May 14, 2020 6:57 am
by Peter
No problem here. Works as expected.

Re: How to change background image?

Posted: Thu May 14, 2020 7:05 am
by 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. :oops:

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

Re: How to change background image?

Posted: Thu May 14, 2020 7:29 am
by Peter
Dirk Geppert wrote: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");

Re: How to change background image?

Posted: Thu May 14, 2020 7:58 am
by 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?

Re: How to change background image?

Posted: Thu May 14, 2020 8:14 am
by Peter
Dirk Geppert wrote: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')");

Re: How to change background image?

Posted: Thu May 14, 2020 9:23 am
by Dirk Geppert
Ah, I see. Thanks for explaining. :)