Hi all,
I want to know how to achieve the required design in the image attached. I want a way to overlay the image which will be a users photo in the spot where it says "Picture". We are currently using columns for each individual button list shown in the image, if we try to put an image in the centre, it creates too much space above and below and gives margin to the middle headers.
Hope you can help. Thanks.
Hi Joel,
You can do it with CSS. Add to the image a class and in the theme, define the following properties to the image:
Your class CSS should look like this:
.myclass { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); }
position: absolute;
z-index: 2;
left: 50%;
top: 50%; transform: translate(-50%, -50%);
top: 50%;
Note that the parent div of the element should have position: relative.
You can use this link to learn more about the absolute position and this link on how to position an absolute element.
Kind Regards,João
Thanks for the advice João. This worked perfectly!