[Support request] GB container with image breaking out of the background color ?

Home Forums Support [Support request] GB container with image breaking out of the background color ?

Home Forums Support GB container with image breaking out of the background color ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1607430
    David

    Hi everyone (Happy New year!)

    I’ve just started working on a redesign of an existing site, and the client likes the effect I have linked to:
    (Scroll down to the row that has: Hospitality Furniture by Adage – green left background)

    I’ve given it a go, but not sure how to achieve it, I assume z-index and negative margins are required ?

    TIA, Dave

    #1607630
    Elvin
    Staff
    Customer Support

    Hi,

    I’ve given it a go, but not sure how to achieve it, I assume z-index and negative margins are required ?

    That’s correct.

    The way to approach this would be:

    A Grid block with 2 columns where the first column that contains the text gets applied with a negative margin-top and the 2nd column containing the image block with a unique class.

    You then style this unique class with a negative left margin and z-index property to make sure it goes above the text. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1607739
    David

    Thanks Elvin, I’ll give that a go and report back…
    Dave

    #1608650
    Elvin
    Staff
    Customer Support

    No problem. Let us know how it goes. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1608807
    David

    Hi Elvin,
    OK made some progress.
    Firstly I had to add: position: absolute; as FF developer tools said the z-index was being ignored unless I added that.

    So it works partly.
    Issues are the content seems to have shifted well to the left – not sure why.
    And I made the right margin of the outer container 50% right margin so the background color only covers the left 50%
    But I can’t work out the best way to make the bottom margin have the same effect.
    I’m guessing because I made the minimum height 600px so the image does not sit over the content below !
    Thoughts ? (my play page is included below)
    Thanks, Dave

    #1609358
    David
    Staff
    Customer Support

    Hi there,

    Couple of options – Simple one:

    1. Create a Full Width Container – with full width inner, and add a 2 column grid. Fill the left hand grid background with your color.

    2. Create a new Container for your 2 column grid below the first container, then use Negative Top margins to pull this container up over the top container. Whatever negative top margin you add, also add bottom + margin of the same value.

    Option 2.
    1. Just create the Container #2 from above.
    2. give it a CSS Class of: background-breakout
    3. Add this CSS to create a background fill, that you can adjust the top position, height, width accordingly.

    .background-breakout,
    .background-breakout .gb-inside-container {
        position: relative;
    }
    
    .background-breakout:before {
        content: '';
        position: absolute;
        top: -100px;
        left: 0;
        width: 70vw;
        height: calc(100% - 100px);
        background-color: #f00;
    }

    You would need to add responsive CSS as well to change it for smaller devices.

    Option 3.
    Repeat option 2 – steps 1 and 2.
    1. Give the Container a Gradient background, set your Solid Color and transparent color to the same Stop point eg 70%. This will create a solid color no blend. Set the Gradient to Pseudo Element:

    2. Add this CSS to move the psuedo gradient position outside of the container:

    .background-breakout {
        overflow: initial;
    }
    .background-breakout:after {
        top: -100px;
        bottom: 100px;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.