How can I get my image to overlap the column horizontally and vertically?

[Scotland]

I’m trying to get my image to overlap the column like in the attached picture

I’ve been able to get it to overlap vertically using a negative margin but not horizontally, any advice greatly appreciated

[ruenel]

Hello Kim,

Thanks for writing in!

You can achieve that by utilizing an image element, column background color and a little bit of css in your column’s “Customize” tab.
1.) Enable the background options in your column settings.
2.) Select a background color
3.) Find the “Customize” tab and insert this element css:

$el .x-bg{
  left: -30px;
  top: -30px;
}

And you should have this:

By the way, if the Advanced background options were not present in your editor, please go to X > Settings > Permissions > User Preferences and set the Advanced Mode to “Always ON”.

Hope this helps.

[Scotland]

Ok so how have you added the image? Adding that CSS to my column moves the image with it, so do I need to insert a new row below, or insert a new row within the column?

[ruenel]

Hey Kim,

I have inserted a section, row with two columns it and an image element inside the left column. The custom css were applied to the column.

If you inserted the image as a background image, then you might need this code instead:

$el .x-bg{
	overflow: visible;
}

$el .x-bg .x-bg-layer-lower-color {
  left: -30px;
  top: -30px;
}

One thing to keep in mind that the background image should be added in the upper layer and the solid color needs to be added to the lower layer.

If this does not help you, provide us access to your site so that we can create an example for you. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.