Just starting out? Need help? Post your questions and find answers here.
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

How to change background image?

by Dirk Geppert Thu May 14, 2020 6:50 am

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
User avatar
Peter
 
Posts: 727
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: How to change background image?

by Peter Thu May 14, 2020 6:57 am

No problem here. Works as expected.
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

Re: How to change background image?

by Dirk Geppert Thu May 14, 2020 7:05 am

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
User avatar
Peter
 
Posts: 727
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: How to change background image?

by Peter Thu May 14, 2020 7:29 am

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");
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

Re: How to change background image?

by Dirk Geppert Thu May 14, 2020 7:58 am

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?
User avatar
Peter
 
Posts: 727
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: How to change background image?

by Peter Thu May 14, 2020 8:14 am

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')");
Dirk Geppert
 
Posts: 171
Joined: Fri Sep 22, 2017 7:02 am

Re: How to change background image?

by Dirk Geppert Thu May 14, 2020 9:23 am

Ah, I see. Thanks for explaining. :)
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 6 guests