How to place an icon over another icon and set it in a button

Vaadin 6 / 7 / 8
1

Hi,

Please refer the attached icons.

I want to merge two icons and set the output icon into a button using vaadin.

My requirement :

I want to place mark.gif over jpeg,png and Merge.bmp should be the output icon.

jpeg + mark = Merge

Is there any way to achieve this?

Thanks,

Thamizh

13454.png
13455.gif
13456.bmp (1.18 KB)

2

First picture (the first layer) can be any type of picture (jpeg, png, gif, bmp…), but the second layer (the done icon need to be format like png with transparent background). Of course you need to define the position of the second picture.

for example

.first-picture {
  position: relative;
  top: 100px;
  left: 100px;
}

.second-picture {
  position: relative;
  top: 100px;
  left: 100px;
}
3

Hi,

I don’t get this. Could you pls post the vaadin code? How to make it work.

4 
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(true);
        
Image basic = new Image(null, new ThemeResource("icon/home.png"));
layout.addComponent(basic);
        
Image check = new Image(null, new ThemeResource("icon/check.png"));
check.addStyleName("move-image");
layout.addComponent(check);
.v-image.v-widget.move-image.v-image-move-image {
    left: 80px;
    position: relative;
    top: -40px;
    width: 20px;
}

This is only simple solution