2 Ways to Make Half-Colored Background Page Sections

On this fast tutorial, you’ll study two methods to separate a web page part’s background into two colours.

Think about the next layouts constructed with Bootstrap:  

Right here, now we have three sections:

• The primary and third sections embrace a heading and a few dummy textual content.
• The second part accommodates three playing cards.

What we would like is, relying on the format, to paint half of the background of the second part.

Technique 1 – Utilizing Gradients

The quickest methodology of making a break up coloration background is thru a linear gradient. The next type is sufficient; all we want is to set the right coloration stops (by default, linear gradients run from high to backside) relying on the format:

1

/*CUSTOM VARIABLES HERE*/.section-second {  background: linear-gradient(var(--bg) 50%, clear 50%);}

Right here’s how our first format will look with this system:

And right here’s the second:

Technique 2 – Utilizing Pseudo-Components

One other manner of dividing a piece’s background coloration into two colours is by specifying a pseudo-element and setting its top equal to the part’s half top. Then, relying on the place we need to place it, we put its top as both high: 0 or backside: 0.

Beneath are the types we’ll want after making the most of the CSS nesting:

1

/*CUSTOM VARIABLES HERE*/.section-second {  place: relative;  &::earlier than {    content material: "";    place: absolute;    high: 0;    /*backside: 0;*/    left: 0;    proper: 0;    top: 50%;    z-index: -1;    background: var(--bg);  }}

Right here’s how our first format will look with this system:

And right here’s the second:

Conclusion

On this quick tutorial, we mentioned two simple methods to separate vertically a web page part’s background into two colours. Clearly, the idea stays the identical if you have to modify the background horizontally. 

Final however not least, all of the demos of this tutorial have been added to a CodePen Collection. Make sure to test it out and provides it some love!