Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

TPM3 Background Image SliderPVII is the leader in creative extensions for Dreamweaver

In this tutorial we will show how Tab Panel Magic 3 can be easily configured to do an awesome marketing presentation utilizing sliding backgrounds and semi-transparent text box overlays.
TPM3 Home | Finished Page

Fast Track

We've prepared a folder so that you can complete a finished page in a few minutes. Download the folder, unzip it, and place it inside a defined Dreamweaver site.

Download bg-tutorial folder

The Process

Open finished-page.htm

Place your cursor on the page and open the TPM3 interface.

Add three panels and configure your options as depicted in the screen capture below, making sure that you configure the Content Layout for each of the 3 panels as Default.

Make sure you select Animation 2 and Theme 01.

Click OK.

Add Text Boxes

Replace the boilerplate text in each panel with a short blurb to describe the image...limiting yourself to a single paragraph. When you are done typing, switch to Code View and locate your pragraph:

<p>This is your blurb text. Limit it to one paragraph.</p>

Wrap the paragraph inside a DIV tag and assign the blurb class to the DIV:

<div class="blurb">
<p>This is your blurb text. Limit it to one paragraph.</p>
</div>

That's it!

The CSS Custom Rules Defined

The following style rules are all it takes.

.p7TP3_content_01 {
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
}
/*The above rule sets background attributes for the content panels. Background-size ensures that the images fill the panel completely and background-position centers the images horizontally and vertically.*/

#p7TP3c1_1 { background-image: url(art/estate01.jpg); }
#p7TP3c1_2 { background-image: url(art/estate03.jpg); }
#p7TP3c1_3 { background-image: url(art/estate04.jpg); }
/*The above rules set the background image for the first 3 content panels, using the IDs genrerated by the TPM3 interface.*/

.p7TP3-01 .p7TP3-01-arrows a {
opacity: .75;
}
/*The above rule makes the previous and next arrows a little darker than normal in their default state. */

.p7TP3_vp,
.p7TP3cwrapper_01,
.p7TP3_content_01 {
border-radius: 5px;
}
/*The above rule rounds the corners of the content area.*/

.blurb {
max-width: 40%;
margin: 5% 0px 5% 100px;
padding: 36px;
background-color: #222;
background: rgba(0,0,0,.6);
border-radius: 6px;
color: #DDD;
}
/*The overlay is simulated using max-width and margins. Transparency is set using RGBA colors with a transparency of .6... while background color is set as a fallback for old browsers.*/

@media only screen and (min-width: 0px) and (max-width: 700px) {
.blurb {
max-width: none;
margin: 3%;
padding: 20px;
}
}
/*The media query makes the overlay box responsive.*/

Assets

The images we chose are 1280 pixels by 560 pixels. The width was chosen so that images would be just wide enough to fill the maximum width of the layout.