Creating a visual effect where content appears to overlap is very easy and can be done a couple of ways. For simple layouts, I believe using the gradient approach is easier to maintain and offers some creative options with little to no effort.
Negative Margins
This fist example uses two containers and then applies a negative margin to the column in the second container. The 7.4 release added responsive container heights making this a very nice option.
Using a Gradient
The remaining examples use a single container with the gradient background applied different ways. This is a very simple method and has some limitations in responsive mode.
This is a title
Tilde jianbing hoodie wayfarers, cliche lyft pour-over hell of post-ironic 3 wolf moon enamel pin. Shabby chic lo-fi unicorn four loko vegan fanny pack. Hella pinterest vape cred. Try-hard bitters flannel etsy godard listicle pok pok venmo typewriter letterpress iceland occupy.
Tilde jianbing hoodie wayfarers, cliche lyft pour-over hell of post-ironic 3 wolf moon enamel pin. Shabby chic lo-fi unicorn four loko vegan fanny pack. Hella pinterest vape cred. Try-hard bitters flannel etsy godard listicle pok pok venmo typewriter letterpress iceland occupy.