How to add an image on top of TWebPanel?

78 Views Asked by At

Reason I want to do this and not use TWebImageControl, is TWebImageControl does not allow me to embed other components on it. I am not able to make for example a TWebLabel a child of TWebImageControl at Design time, really think this is some type of bug but for now am trying to find a workaround for this.

So basically, I want to give TWebPanel an image source e.g., <img src="example.jpg"> and make sure that the image takes the entire width and height of TWebPanel.

Probably related to a question I recently posted:
How to add a background image to a Form on TMS Web Core for Delphi

pnlSection.ElementHandle.style.setProperty('background-image','../assets/section-1.png');

I have attempted to use this line of code above, but to no avail.

Panel DFM:

object pnlSection: TWebPanel
    Left = 0
    Top = 128
    Width = 1454
    Height = 872
    Margins.Left = 5
    Margins.Top = 5
    Margins.Right = 5
    Margins.Bottom = 5
    Align = alClient
    ChildOrder = 2
    ShowCaption = False
    object imgSection: TWebImageControl
      Left = 0
      Top = 99
      Width = 1454
      Height = 773
      Margins.Left = 5
      Margins.Top = 5
      Margins.Right = 5
      Margins.Bottom = 5
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      Align = alClient
      ExplicitTop = 144
      ExplicitHeight = 728
    end
    object lblSection: TWebLabel
      Left = 0
      Top = 0
      Width = 1454
      Height = 99
      Margins.Left = 5
      Margins.Top = 5
      Margins.Right = 5
      Margins.Bottom = 5
      Align = alTop
      Alignment = taCenter
      Caption = 'Heading'
      Font.Charset = ANSI_CHARSET
      Font.Color = clWindowText
      Font.Height = -40
      Font.Name = 'Sans Serif Collection'
      Font.Style = []
      HeightPercent = 100.000000000000000000
      HTMLType = tH1
      ParentFont = False
      WidthPercent = 100.000000000000000000
      ExplicitWidth = 263
    end
  end
end
1

There are 1 best solutions below

0
On

Solution found:

Make sure your move your assets folder into your debug/release folder

procedure TForm1.WebFormShow(Sender: TObject);
begin
  pnlSection.ElementHandle.style.setProperty('background-image', 'url("assets/section-1.png")');
end;

And Vola!