Box with a background image
Some Background
This will set the background attachment to "fixed". This creates an interesting effect where it looks like the container is actually moving over the background. This works best with large images or backgrounds with repeating patterns.
Fixed backgrounds can also work well as page backgrounds.
Fixed Background
<div class="elr-background-fixed"></div>
Repeating Fixed Background
<div class="elr-background-fixed-repeat"></div>
To set a fixed background to scroll add the elr-background-scroll class. This will restore the default background attachment scroll behavior.
<div class="elr-background-scroll"></div>
Sometimes its necessary to remove a background quickly.
No Background
<div class="elr-no-background"></div>
By default CSS backgrounds will repeat again and again to fill their container.
Repeating background pattern
no repeat background pattern
<div class="elr-background-no-repeat"></div>
no repeat centered background pattern
<div class="elr-background-centered"></div>
no repeat centered background pattern
no repeat centered background pattern
CSS backgrounds can be resized using fixed units, percentages, or keywords.
The cover keyword forces the background to fill the entire container. It will keep its aspect ratio so images will no distort. However small images will stretch so you will need to use a large image to fill large containers.
Background images with a size of cover will not repeat.
Keep in mind that the background image may appear cut off and position it appropriately.
no repeat background pattern cover
<div class="elr-background-cover"></div>
The contain keyword forces that background to fill to its largest size while maintaining aspect ratio. This means it will either take up the entire width or height of its container. The entire background image will be visible. It will stretch if necessary.
Unless the background image has the exact same proportions as its container it will not fill the entire container.
The contain keyword is useful when you need to make sure the entire background image is visible.
no repeat background pattern contain
<div class="elr-background-contain"></div>