Show label/text on top of an image

Hello all,

I have a question regarding showing an image and on top of the image a label. I have tested a lot of things but it does not work. Is it possible to define a specific position (maybe with a transparent background?).

    GridLayout layout = new GridLayout(1, 1);
    super.setCompositionRoot(layout);
    
    HorizontalLayout imageLayout = new HorizontalLayout();
    String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
    FileResource resource = new FileResource(new File(basepath + "\\test.jpg"));
    Image image = new Image();
    image.setWidth("100%");
    image.setSource(resource);
    imageLayout.setSizeFull();
    imageLayout.addComponent(image);
    layout.addComponent(imageLayout, 0, 0);
    
    Label label = new Label("Text on top of a component");
    layout.addComponent(label, 0, 0);

Best Regards,
Thomas

Hi,

probably the easiest option would be to wrap the image with an AbsoluteLayout and then add the Label to that layout as well using coordinates that place it where you need it on top of the image. I don’t remember exactly but it might be that you need to set some z-indexes to get the label on the top.

See
https://demo.vaadin.com/book-examples/book#layout.absolutelayout.zindex
for an example.

-tepi

Hello Teppo,

thanks for the answer, but I do not think that this work for me, because the picture in the background will be automatically resized by sizing the browser. By having a fix position the label will not automatically resized, right?

Best Regards,
Thomas

Hello all,

does anyone have an idee? :slight_smile:

Best Regards,
Thomas