Adding a background overlay to your site


If you want to add an overlay to your background, it is VERY easy to do with Foundation. First, add your Site Styles or Global Site Styles stack to your page (it works with both). Then you need to find the stack settings called Foundation - Site Background.

Foundation Site Background Settings

Then you need to change the Type from Solid Color to any of these options. Cover Image, Cover Image (Warehouse), or Slideshow (Warehouse) (you can only add an overlay to a cover image or a slideshow). If you want to have an ovelay on a solid color, choose the color, then change it to tiled image and drop the overlay into the tiled image image well.

Foundation Site Background Settings

Once you choose the option you want to use, an Overlay image well will appear in the stack settings. For this example we chose Cover Image.

Foundation Site Background Settings

If you have an overlay you want to use, just drop it into the image well and it will appear in the image well. If you do not have one, don’t worry, Foundation ships with 15 Overlays that you can use. They are located in the Stacks Media Library.

Stacks Media Library

Click on the Stacks Media Library button to open the Media Library HUD.

Stacks Media Library HUD

To find the Foundation Overlays, click in the search box and type Foundation and you will see the results come up below:

Stacks Media Library Foundation Overlays

Now just drag and drop the overlay you want to use into the image well and it will appear there.

Foundation Overlay Dropzone

You have now added an overlay to your background image or slideshow. You can adjust the Overlay opacity if you want. The overlay will not show up in Edit mode, you will have to preview it to see the overlay.

Now go forth and make your websites great!