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

[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

[Elvin]

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?"

[David]

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

[Elvin]

No problem. Let us know how it goes. 😀

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

[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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts