Support Center Visit Demo License manager Buy @ envato

Help with half background

LetsHallooLetsHalloo
in BeBuilder

Hi

I trying to do somethig like this: Half backgound, half content. I dont find the way.

trying.JPG


My site is this: https://vintimilla.legal/

I tried to do it with only one picture of background, but in mobile looks aweful.


Thanks!

Comments

  • PhilPhil

    Hello,

    To achieve that, you can put in the section two wraps, put your content in one wrap, and put an image in the second. Please, also check the option the equal height of wraps in section options.

    obraz.png
    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • LetsHallooLetsHalloo

    Hi,

    Thanks, but it did not completly work. Please take a look: There are white space in the right and below. I tried with different sizes. In smaller screens looks a litlle better but still there are space in the right and below.

    home background.JPG

    equal h.JPG


    Thanks!

  • LetsHallooLetsHalloo

    Please take a look how it looks in mobile right now. The image does not fit all width and height.

    mobile.JPG


    Thanks

  • PhilPhil

    Then please, also check a Full-Width option in the section options, and Stretch in image options.

    image.png
    image.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • LetsHallooLetsHalloo

    Hi.

    After some trial and error with the image, I tried to use a background of that section wrap, and get rid of the image. It looks like Iam geting closer. But, in mobiles the backgound does not appears.

    Please take a look:

    I put the background I want here. With no elements inside the wrap, only the background.

    background wrap.JPG

    How it look on PC:

    background in PC.JPG


    But in mobile this background dont show up:

    No backgound in mobile.jpg


    Please Help.


    Thanks

  • LetsHallooLetsHalloo

    This is URL https://vintimilla.legal/

  • PhilPhil

    You can create a copy of this section, set responsive visibility so one section will be displayed on desktop and second on mobile, and modify the mobile section to have an image item instead of a wrap background.

    obraz.png

    The content on the mobile is displayed in one column only, and that is why the wrap background disappears.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • LetsHallooLetsHalloo

    Hi

    Thanks for that tip. In desktop view I think Iam getting closer.

    But in mobile I did what you told. Use image instead of background. When the mobile is in vertical position it looks good. But when mobile is in horizontal position then it looks very bad.

    Take a look:

    Screenshot_20210331-125557_Chrome.jpg
    Screenshot_20210331-125544_Chrome.jpg


    Look at the gap between images, and text.

    https://vintimilla.legal/

    Thanks for the help.

  • PhilPhil

    Please, open the mobile section's options, select Columns | remove vertical margin option, and check if after that the display is correct.

    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • LetsHallooLetsHalloo

    Hi

    I tried that and the margin was reducen but no completely. Please take a look:

    2021-04-20.jpg

    Thanks

  • PhilPhil

    Please, uncheck the Equal Height | wraps option for mobile sections, and check if this space disappears.

    You can also set the Padding | Bottom for section and Margin Bottom fro wrap to zero.

    obraz.png
    obraz.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.