Create an Image Background with Foreground Content TUT

Shortcodes are Fun!

This is a fixed background image with foreground content.

I’ve been meaning to get moving on creating posts that illustrate examples of how to accomplish page design elements in an easy to follow tutorial. One of our Clients sent in a question and that was motivation enough to create this post!

This tutorial is for use with the Respondo Pro Shortcode Plugin built by Spark Logix Studios.

Image Background


What combination of Respondo Pro shortcodes would I use to have an image as a background with text/other content on top of it. I am not looking to do full width content, but rather something that just fits in a sidebar or within a post.

Create Your Layout & Add the Content

For this example, we’ll start by creating two columns (text in the left and a background image with content over it in the right column). Of course you can do any combination you’d like using the column shortcode options.

Click to Open the Shortcode Editor

Using Respondo Pro Shortcodes (for WordPress)

Select Your Column Selections

Add Columns using Respondo Pro Shortcodes

Select where you want to add the Image.

In this example we’re adding the image in the right column.

Select Where to Add

Open the Shortcode Editor (and select Column Background)

Here, you’ll see you have multiple options. Make your selections and “Insert”.

Adding Column Background

Enter Your Content

Now you’ll enter the content you want to display over the image (get creative).

Add Foreground Content

For example…

Add Content on Respondo Pro

Here’s our LIVE example!

There are a lot of variations available when using Respondo Pro Shortcodes. Get creative and have fun!

 WHOA! That was easy!

Leave a Reply

Your email address will not be published. Required fields are marked *