I am trying to place (stack) two images on top of each other as well as center them. Normally using Bootstrap I could give the image a class of “center-block”. The problem is that then appear vertically on top of each other as opposed to stacked directly on top of each other like a stack of paper. To stack them I need to give them a css property of position:absolute. When I do that they move to the left side of the screen and are no longer centered. Any idea how to stack two images and have them centered?
I would look into the background image CSS property for this. Otherwise, you’ll probably need to look into position absolute but that can result in other issues depending on how the parent container is positioned (or not).
I need them physically on top off each other and then I can control which one is visible using opacity and z-index. Unless I do not understand your answer correctly putting them in their own row and column would have both images visible at the same time.
I think I have it solved by forcing the images to a certain width say 80% and then using left 10% to position the images. So far it does not look like it is causing any issues and it is looking like it is staying responsive.
