How to set the background of a panel to an image?

[n0dr4w]

I'm making my own MTA server and I want to learn how to set the background of a panel/window to an image (if it's possible).

Can anyone help me?

[Tekken]

Hi, is the panel a GUI or DX ? Also if you show us the code it would be easier.

 

Greetings.

[n0dr4w]

Hello, the panel is a GUI window.

Here is some of my code:

-- Define window dimensions and background image path
local windowWidth, windowHeight = 480, 320
local bgImagePath = "lgn_bg.png"

-- Calculate window position to center it on the screen
local screenWidth, screenHeight = guiGetScreenSize()
local windowX, windowY = (screenWidth - windowWidth) / 2, (screenHeight - windowHeight) / 2

-- Create the window (invisible, we will draw the background image instead)
local window = guiCreateWindow(windowX, windowY, windowWidth, windowHeight, "", false)
guiSetVisible(window, false)

-- Create GUI elements
local usernameLabel = guiCreateLabel(50, 80, 100, 25, "Username:", false, window)
local usernameField = guiCreateEdit(150, 80, 280, 25, "", false, window)

local passwordLabel = guiCreateLabel(50, 120, 100, 25, "Password:", false, window)
local passwordField = guiCreateEdit(150, 120, 280, 25, "", false, window)
guiEditSetMasked(passwordField, true)

local loginButton = guiCreateButton(50, 160, 100, 30, "Login", false, window)
local registerButton = guiCreateButton(190, 160, 100, 30, "Register", false, window)
local guestButton = guiCreateButton(330, 160, 100, 30, "Guest", false, window)

-- Function to draw the background image
function drawBackground()
    if (isElement(window)) then
        guiCreateStaticImage(windowX, windowY, windowWidth, windowHeight, bgImagePath, false)
    end
end

-- Add an event handler to draw the image each frame
addEventHandler("onClientRender", root, drawBackground)

-- Show the window
guiSetVisible(window, true)

-- Ensure that the window is destroyed when the resource stops
addEventHandler("onClientResourceStop", getResourceRootElement(getThisResource()), function()
    if (isElement(window)) then
        destroyElement(window)
    end
end)

-- Add event handlers for buttons (implement your login logic here)
addEventHandler("onClientGUIClick", loginButton, function()
    local username = guiGetText(usernameField)
    local password = guiGetText(passwordField)
    outputChatBox("Login clicked. Username: " .. username .. " Password: " .. password)
    -- Implement login logic here
end, false)

addEventHandler("onClientGUIClick", registerButton, function()
    local username = guiGetText(usernameField)
    local password = guiGetText(passwordField)
    outputChatBox("Register clicked. Username: " .. username .. " Password: " .. password)
    -- Implement registration logic here
end, false)

addEventHandler("onClientGUIClick", guestButton, function()
    outputChatBox("Guest clicked.")
    -- Implement guest login logic here
end, false)

 

[TMTMTL]

Hi, I'd recommend using DGS DX Library.

[kewizzle]

-- Define window dimensions and background image path
local windowWidth, windowHeight = 480, 320
local bgImagePath = "lgn_bg.png"

-- Calculate window position to center it on the screen
local screenWidth, screenHeight = guiGetScreenSize()
local windowX, windowY = (screenWidth - windowWidth) / 2, (screenHeight - windowHeight) / 2

-- Create the window (invisible, we will draw the background image instead)
local window = guiCreateWindow(windowX, windowY, windowWidth, windowHeight, "", false)
guiSetAlpha(window, 0) -- Make the window fully transparent

-- Create GUI elements
local backgroundImage = guiCreateStaticImage(0, 0, windowWidth, windowHeight, bgImagePath, false, window)
local usernameLabel = guiCreateLabel(50, 80, 100, 25, "Username:", false, window)
local usernameField = guiCreateEdit(150, 80, 280, 25, "", false, window)

local passwordLabel = guiCreateLabel(50, 120, 100, 25, "Password:", false, window)
local passwordField = guiCreateEdit(150, 120, 280, 25, "", false, window)
guiEditSetMasked(passwordField, true)

local loginButton = guiCreateButton(50, 160, 100, 30, "Login", false, window)
local registerButton = guiCreateButton(190, 160, 100, 30, "Register", false, window)
local guestButton = guiCreateButton(330, 160, 100, 30, "Guest", false, window)

-- Show the window with the background image
guiSetVisible(window, true)

-- Ensure that the window is destroyed when the resource stops
addEventHandler("onClientResourceStop", getResourceRootElement(getThisResource()), function()
    if (isElement(window)) then
        destroyElement(window)
    end
end)

-- Add event handlers for buttons (implement your login logic here)
addEventHandler("onClientGUIClick", loginButton, function()
    local username = guiGetText(usernameField)
    local password = guiGetText(passwordField)
    outputChatBox("Login clicked. Username: " .. username .. " Password: " .. password)
    -- Implement login logic here
end, false)

addEventHandler("onClientGUIClick", registerButton, function()
    local username = guiGetText(usernameField)
    local password = guiGetText(passwordField)
    outputChatBox("Register clicked. Username: " .. username .. " Password: " .. password)
    -- Implement registration logic here
end, false)

addEventHandler("onClientGUIClick", guestButton, function()
    outputChatBox("Guest clicked.")
    -- Implement guest login logic here
end, false)

Try this