Row Backgrounds

Solid Color Parallax Gradient Static Image Video Particles

Style 1

Solid Color

A solid color row background is a cool, minimalist option that works best on informational sites or on the internal pages of sites rather than the homepage. If a solid hero is placed on the homepage, it would probably be best accompanied with some sort of splash image, slider or module that can still grab visitor attention, perhaps with a call-to-action or cool row separator placed at the bottom.

Style 2

Parallax

A parallax row background contains a high quality image (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row. The amount of the image that shows depends on how tall the row is set to be. This parallax row background example takes up about 1/2 of the screen height and has a 75% dark gray overlay.

Style 3

Gradient

A gradient row background is a cool, minimalist option that works well as a hero on informational sites or on the internal pages of sites rather than the homepage. The gradient can be set to linear or radial. This example takes up about 1/2 of the screen height and displays a gradient background set to "linear" at a 45 degree angle.

Style 4

Static Image

A static image row background contains a high quality image (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row. It is similar a parallax but without the background image shifting up and down on scroll. If it is desired that the image stay in the same place, or certain parts of the image show, then this option should be selected instead of a parallax. This example takes up about 1/2 of the screen height, employs a static image background set to "center" and has a 60% light gray overlay. 

Style 5

Video

A video row background contains a short, looping, high quality video (preferably about 1920px in width or more, and with landscape orientation) set to the background of a row. These videos can be chosen from stock, provided in .mp4 format, as a url for the video uploaded to a public hosting provider, or as a link to a publicly posted youtube/vimeo video. If it is expected that there be text placed on the row as shown here, then the video will not have controls, and therefore should not have sound attached or text within the video as well. Another item to be noted is that videos as row backgrounds require a fallback image for when the hero doesn't load or is viewed on a smaller screen. Most mobile devices do not allow video heroes and display the fallback image by default. This row example takes up about 1/2 of the screen height and displays a looping video with a 80% gray overlay.

Style 6

Particles

Particles can be placed over a solid color, a gradient, or an image/parallax row background as seen in this example. You can choose from 3 options - snow, polygons and NASA which are little star clusters. There's an advanced option which allows you to allow the particles to react on hover. These are a great addition to a hero image to grab attention on the homepage, but they shouldn't be overdone or repeated in multiple rows on the same page. Also, one particle type should be consistently used throughout the site - two different particle types break the consistency and take away from the original affect. This example takes up about 1/2 of the screen height, displays a parallax image background, has an 80% dark blue overlay, and is using the snow particle background with the hover effect enabled.