Site logo

Archived topic

Styling of two column layout with background image

1 reply · Started by Abid on September 4, 2020

Viewing posts 1–2 of 2

Hi there,

currently there are several options but they all require a little bit of code. The next version of GB and the future GB pro will make this easy.

I would do the following:

1. In the left Grid column. Add a background image. Give the column a Settings > Advanced > Additonal CSS class of has-svg
2. Inside the left grid column add a HTML widget and add this code:

<div class="svg-container">
    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="80,100 100,0 100,100"></polygon>
    </svg>
</div>

3. Add this CSS:

.has-svg {
    position: relative;
}
.svg-container svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    fill: #f00; /* Set color here */
}
This archived topic is closed to new replies.