Overlapping div in Visual Composer

Question

I want to develop the next thing.

See example image: Overlapping div with text and background-color with a smaller width than the text

How can I achieve this? I'm using the Visual Composer in Wordpress. You can see what I made here: http://glashelder.id-buro.nl/hometest/. This is not how I want it.

Give relative position and z-index. may be it can help you – ExploreNav Jun 26 '17 at 11:50 — ExploreNav, Jun 26 '17 at 11:50

score 0 · Answer 1 · answered Jun 26 '17 at 11:56

0

add this to your css:

.wpb_single_image.vc_align_left {
    text-align: left;
    position: relative;
    z-index: 1;
}

answered Jun 26 '17 at 11:56

jkwiatkowski

21
1

Thanks! Got a little bit closer. How can I achieve the text will be stick in the middle (vertical). I also want some plus margin on the top and the bottom and min margin on the right. – refreshfabian Jun 26 '17 at 12:06

score 0 · Answer 2 · answered Jun 26 '17 at 11:59

You can make an image by merging white and sky color portion and set that image as background-image of that div. Then select row layout(probably 2/3+1/3 is good as per image) in the visual composer.
Or you can do this via CSS by giving absolute position one of the div and set some margins to get same design as per image but you will need to do some more design and write css for responsiveness. So I think first option is better. :)

Overlapping div in Visual Composer

2 Answers2