Tips: Adding an Opaque Content Block
Here's how to achieve an opaque content block on your banner or row using the layout builder and text cards.
1. Apply a background image to a row.
2. Drag two text cards onto that row.
3. Delete the contents of one of the cards and if desired, set a minimum height.
<div style="min-height: 420px"></div>This provides an invisible block that will keep your row and background image from shrinking to only fit your written content. Background images are responsive, so they resize proportionately from top center (unless you change the Focal Point in the image options) depending on your current browser screen size. Adding empty text cards with a min-height is a good way to mimic a spacer card if you have a desired height for your banner and what to keep it from resizing.
4. To create the opaque text block, you can use the following snippet in the other card:
<div style="background: rgba(43,43,43,0.9); color: #fff; padding: 20px; height: 400px;">
<h2 style="font-size: 30px; line-height: 32px;">Improve River Recreation Safety</h2>
<p style="font-size: 16px; margin-top: 40px;">Understand the conditions fully before kayaking, canoeing, or enjoying then nation’s river system. This initiative strives to decrease deaths caused in rivers from flooding and rapid conditions through smart tools.</p>
</div>
