Blog

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

Think about the next layouts constructed with Bootstrap:  

Web page format 1Web page format 2

Right here, we’ve got three sections:

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

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

Technique 1 – Utilizing Gradients

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

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

And right here’s the second:

Technique 2 – Utilizing Pseudo-Components

One other method of dividing a piece’s background shade 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 wish to place it, we put its top as both high: 0 or backside: 0.

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

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

And right here’s the second:

Conclusion

On this brief 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 want to modify the background horizontally. 

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

As at all times, thanks lots for studying!

Asymmetrical Designs

If you wish to construct sections with asymmetrical designs, take a look at these tutorials.