I’d like to have four images at the exact same position on the screen, centered, and in a bootstrap .container so that if images are to big they are resized.
The goal is to make the first page of a website which contains the full logo, black and white.
I use a map/area so that on mouse-enter events I can show an image behind the logo, creating some kind of shadow (which I cannot do via css since it has a specific shape) under the logo in the specific region.
My four images are the following :
- full logo
- shadow for top left
- shadow for top right
- shadow for bottom
They all have the exact same size. I thought just using .pagination-centered on all of them combined would be enough but it ain’t working.
I tried the following CSS for all images (all embeded in a seperate div)
position:absolute;
left:50%;
top:50%;
margin-left:-157px;
margin-right:-157px;
/* half of img real size */
it works well but not on a mobile where the images are not resized correctly and the bottom bar appears in the middle of the screen because I guess the image height is not taken in account when positioning it.
Never mind, I found it and feel quite dumb actually:
I simply use multiple css classes with a background applied to the image itself.
On a responsive design it doesn’t work very well because the background is not resized, but I’m pretty sure I can find a workaround. If not I will use two sets of images. And since the callback is on the
mouseenterevent it doesn’t really matter on a mobile after all !Hope it will help someone