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.

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.

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.

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.

Click on the Stacks Media Library button to open the 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:

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

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!