Image png floating infront of other elements

[whitelobster11]

Hello

I would like to make a png image float ontop of other elements within my page

on the page http://www.motherculture.love/welcome-test there are text boxes at the top of the page that have a list of cities and it also says COMING SOON

I would love to make the png image of the baby located lower on the page appear at the top of the page so that it overlaps with the list of cities in the center

how can I accomplish this? mockup attached below to show what I am trying to accomplish- i want the baby image to float ontop of the other elements below it but stay in the same spot (it should not follow the viewport as you scroll like paralax floating)

Login info attached below

Thank you so much!!

[friech]

Hi Jared,

Thank you for writing in, placed the baby image on the same Column as the Textboxes first. And then Add this to the Image’s Element CSS area.

$el .x-img {
	position: absolute;
    top: 50%;
    left: 50%;
}

Hope it helps,
Cheers!

[whitelobster11]

Hi

Thank you so much for this! Unfortunately I cannot find the ‘element css’ field anywhere within the image element. I have updated to the most recent version of X Theme however I am running from a child theme. Do I need to do something else in order to make the element css field show up in cornerstone?

Login info attached below

[rad]

Hi Jared,

It appears to be a classic image, instead, add this to Image’s Style field

position: absolute; top: 50%; left: 50%;

Thanks!

[whitelobster11]

Hi Rad

Thank you so much for this

I have tried this as well as tried converting the classic image to the new image element, however this code does not seem to have the intended effect when pasted into element css

Can you please take a look and let me know what I need to do to make the png image hover above the text elements like the mockup in my first post?

Login info attached below~ thank you again!!

[ruenel]

Hello Jared,

I went ahead and updated the css code. I used this instead:

$el.x-image {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -175px;
}

Please check your site now.