Section Spacing

There's a lot of text here on purpose to demo and test.

The best Lorem Ipsum Generator in all the sea! Heave this scurvy copyfiller fer yar next adventure and cajol yar clients into walking the plank with ev'ry layout! Configure above, then get yer pirate ipsum...own the high seas, arg!

Basic Section Clear
No Background Image, Background or Overlay

This demonstrates the basic section type without a background image, background color, or overlay color. If any adjacent sections allow for a background image overflow, it should be visible within this section.

Basic Section Background Image Overflow
Background Image Style set to "Overflow"

This section demonstrates the basic section type with the Background image set to "Overflow". This allows the background image to overflow the container. The difficult part is controlling the background image position on the x and y axis. I will document how to do that here and change it as we figure out new ways to make that work.

Basic Section Clear
No Background Image, Background or Overlay

This demonstrates the basic section type without a background image, background color, or overlay color. If any adjacent sections allow for a background image overflow, it should be visible within this section.

Basic Section
Basic Section Background Image Cover

Demonstrates the basic section type with a background image that does not overflow the section.

Basic Section
Background Image Contained With Overlay

In this section you see a basic section configured with a background image that is set to "Contain". It also has an overlay applied. What you should see is that the background image maintains it's aspect ration and stays within the boundry of the section on the x and y axis. You should also see an overlay applied.

There is a background color and the image position has been set to center bottom.

Basic Section Repeating Background
Repeating Background Image Section for Old School Cool

Rolling with the repeating background image section. This has a complex, but cool, recipe.

I'm using a transparent png image that will tile seamlessly. I set the background image to repeat, so it will create a cool repeating tiled pattern.

The background color is set to #EFEFEF, which is a light grey. Because the png is semi-transparent, you will be able to see the grey background comt through, creating a cool textured pattern.

An overlay color is also applied. The overlay uses a CSS linear gradiant value that transitions from white and transparent to blue and 100 opaque on the x axis.

What you should see is a complex background behind all of this text.

Full Width Section
Full Width Section with a Background Image

This section is full width with a background image in it.

Full Width Background Image
This is a full width background image section.

This section is used whenever you want to have a completely full width background image that covers the entire background of the section.