Using strong background images on your website can add another layer of design to your pages. We've created some effects that you can use to enhance your background images without needing to use any 3rd party design tools, such as Photoshop.  

We've showcased a few of the ways you can use this feature below and included all the details on how we designed each image. Best of all, every effect we added to the images below was done entirely through the Greenhouse so, if you wanted, you could recreate each of our steps and get the same results - no matter what kind of design experience you have!     

High Impact Home Page

Site designs with a non-sticky header, such as Anthem, can use a powerful background image to make their home page immediately grab people's attention. With the fade effect applied to the top of the image, you can even make it appear as if the photo is part of the navigation. Here's how we created this image:

Original Photo: Black and white scenic photo
Page Background Color: Medium red (#A14242)
Blending Options: Screen
Opacity: ~80%
Fade: Top
Background Options: Always Fill background

Section Separating Images

 
Section separating images help break up the content on your page and can be really nice for text-heavy websites. To add a section separating image check out our help article. Here's how we were able to create this image: 

Original Photo: Colored photo of interior space
Page Background Color: Nearly White (#F5F5F5)
Blending Options: No Blending
Opacity: ~60%
Fade: No Fade
Background Options: Always Fill Background

Heavy Text with a Photo Background

In the past, placing a background image behind a text heavy section was a gamble - you don't want your image to distract from the important message you're trying to communicate. Now you can design an background image, like the one featured above, so it doesn't distract from any of your content. Here's how: 

Original Photo: Black and white scenic photo
Page Background Color: White (#FFFFFF)
Blending Options: Multiply
Opacity: ~40%
Fade: Left
Background Options: Always Fill Background

Page Title Section 

Placing the title of your page over a subtle background photo looks great and reminds your visitors where they are on your site in a creative way. Like in the example above, it's important that your background photo isn't too overwhelming or it will detract from this cool minimal look. Here's how we did it: 

Original Photo: Black and white photo of outdoor gathering
Page Background Color: Dark gray (#404040)
Blending Options: Overlay
Opacity: ~10%
Fade: No Fade
Background Options: Always Fill Background