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
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.
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 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.*/
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.