Background

.bg-no-repeat, .bg-space and .bg-round define the background-repeat behavior.

{% apply view_source %}

{% end %}

.bg-cover and .bg-contain set the background size.

{% apply view_source %}

{% end %}

.bg-fixed controls the scrolling behaviour.

{% apply view_source %}

{% end %}

.bg-center centers the background. Other background positioning classes are available.

{% apply view_source %}

{% end %}

.bg-parellax keeps the background fixed while the content scrolls. It is the same as .bg-center .bg-no-repeat .bg-fixed .bg-cover

{% apply view_source %}

Parellax effect

Scroll the page to view it

{% end %}