How would I overlay an image in blocks

Support
#1

I’m trying to accomplish doing something like what this site has on their site where the computer is overlaid into the block above it (in the navy coloring).
I am curious how to do this. I tried a few things but didn’t find a way.

#2

@AudreaRobbins

Really simple to do… and numerous ways. Also note that that particular graphic is actually 2 images, IF your trying to do exactly that. But if your just after having a graphic of 1 image (open laptop), try this…

1.Create 2 “Sections”… and on your left be sure to remove all spacing.
2. On the top section, just for something quick and then you can refine it how you like, make background a subtle color so you can see the differences in sections. Then add top padding of about 150px and bottom padding 150px.
3. On the 2nd Section right below the 1st section, choose another subtle background color thats NOT the same as 1st section. And put padding bottom 50px. In this 2nd section add 2 columns.
4. In the right column, use image widget… put ur graphic image.
5. Now while having that graphic image selected. Over on the left of the builder scroll down to where you can put in your own custom CSS styles. The where the field lets you enter in your own Styles… put exactly this in there:
position: relative; top: -100px;

This is right off the top of my head. You most certainly will want to adjust to your liking and needs, but the important thing to grasp is

  1. the padding of the sections (which gives your sections space… more padding gives more space)
  2. the CSS of relative position (allows you to push that image upwards… breaking out of the section and column)
  3. The negative px will push the object up while a positive number will push it down

Lastly there are other ways to accomplish the same thing, but I figure this is the easiest to grasp.

#3

Hi Guys,

@kimmikennedy thank you for helping out and for such a detailed write-up. You solution will do the trick.

@AudreaRobbins please follow the above solution and let us know if it works for you.

Cheers!

#4

I apologize for not replying, a family friend died right after my post. I will respond on if it works when I get a chance to try it. Thank you for explaining it so very well… I greatly appreciate it.

#5

Hi Audrea,

Sorry to hear that, just let us know when you get the chance.

Thanks

#6

Hi. I have tried this and I understand everything until i get to add CSS part. I can add to the overall page CSS, but as far as a custom area on the left sidebar in the Inspector, (with image element area clicked), it gives no Custom CSS section to enter in. I’ve tried multiple times. I’m sure it’s me somehow missing the section. But it’s not there on my screen for the image. I could see it once but not anymore on my layouts. And I have the Advanced Editor turned on too. I also cleared the V2 Style Cache hoping that would fix it. nope…
EDIT- I found the Custom at the top for the css of the image. But it will not do anything with CSS added to the v2 element.
So t tried a CLASSIC element, and it worked there. For future reference, am I doing something wrong entering the same info on the style section for non-classic elements?

#7

Hey Audrea,

For v2 elements such as the image, you should be able to insert a custom element css in the “Customized” tab. Once you find the element css field, you insert this:

$el {
  position: relative; top: -100px;
}

or something like:

$el img{
  position: relative; top: -100px;
}

Hope this helps.

#8

that worked this time with v2. I had to log out and back in for the customize section to show for v2 elements. I knew it was there before! So, idk why it was missing for that login… thanks!

#9

You’re welcome, Audrea.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.