Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #761474


    I am trying to achieve a split screen in a colour section. I inserted a colour section with a background image and then 2 columns inside with no margin and equal height, no space between columns. Alignment top.

    I would like that the blue transparent background of the right column covers half the page (ie the right-hand side of the screen) to the border of the colour section container… but I don’t seem to be able to figure it out… Would you have any insight?

    The link to the website is below.
    Thanks so much & all the best,


    Hey Corina!

    Please consider using Grid Row element instead. It would give you the exact layout you are looking for :)
    Examples can be seen on demo site here –



    Hey Yigit

    I understand that but I could not find how to have the background image go across the whole page… or am I wrong?
    Thanks so much, Corina


    Hi Corina,

    You can simply hover on your grid cells and click this blue button – to edit your cell and you can change its background color there :)



    Hi Yigit

    Yes I understand that I can do that but I would like to have one background image that goes across both cells… and have the right cell to be transparent… I just figured it out… with the following code via custom css:

    .grid-right {
    background: rgba(39, 63, 113, .5);

    .grid-bg {
    background-attachment: scroll;
    background-image: url(“”);
    background-position: center center;
    background-repeat: no-repeat;

    Just in case anyone is interested.
    Thanks Yigit for your super quick response, much appreciated.
    All the best,



    You are welcome!
    Glad you figured it out and thanks for sharing your solution :)


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Split Screen within Colour Section’ is closed to new replies.