Solved

Two background images on the main part of the page in Frontpage

Posted on 2004-04-16
23
361 Views
Last Modified: 2013-12-24
I am trying to set a two background images on the main part of the page in Frontpage.

I have an image that I need to use for the background. It is an odd image that cannot be repeated. The image is fine when I do not have lots of text but when there is a lot, I just get a white back ground after the image.

What I am trying to do is use the main image on the top (which will not repeat) and then use another image I created that looks like the bottom of the image (which is solid) to repeat....so that the second image will span for the length of the page's text.

Any ideas?????

Here is the code:

main page:

   <td width="571" valign="top" class="main"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="150" id="AutoNumber1">
    <div id="mainside"></div>
 

Css:

body {
    margin : 0px;
    padding : 0px;
    }

.banner {
    background-color : #FFF;
    font-size : 11px;
    font-weight : normal;
    font-variant : none;
    color : #FFF;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    padding-top : 5px;
    padding-right : 10px;
    }

.top {
    background-color : #323232;
    color : #FFF;
    font-size : 12px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    line-height : 18px;
    }

td.main {
    background-image : url('images/ocean.jpg');
    background-repeat : no-repeat;
    background-color : #FFF;
    color : #545480;
    font-size : 12px;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    line-height : 18px;
    padding : 8px;
    }
   
div#mainside {
    background-image : url('images/repeat_main.jpg');
    background-repeat : repeat;
    background-color : #FFF;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    }

Thanks,
LA
0
Comment
Question by:alcoxfam
  • 12
  • 8
23 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 10845487
Well, there's not enough code there - please if you can post a link to the page that would help because we need to see the images and the full page :-)
0
 
LVL 14

Expert Comment

by:hhammash
ID: 10845501
Hi,

Put one image as background for your page.  Then create a table without borders.  Let the table be 100% of the page.  

On the table wherever you like,  select the cell that is in the center of the table and make your picture as a background for it.

So:
1- One picture as background for the page
2- One picture as a background for the table cell

Both images will be on top of each other.


OR:
-----
Take both images to Photoshop,  make them one there and make produced picture as a background for your page.


hhammash
0
 

Author Comment

by:alcoxfam
ID: 10846101
Here is the link!

http://www.aws-test.com
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10846242
Well, I'll have a look for you - but I need to tell you that the code is in pretty bad shape.

FP is good, but it gets messy very quickly - and this will cause a lot of problems in the future.

As an example, here's part of the page html:

</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font>
</font></font></font></font></font></font></font></font></font>
   </font>
   </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font>
</font></font></font></font></font></font></font></font></font></font></font></font></font>


I'm fine with it if you are, but I do have some concerns....
0
 

Author Comment

by:alcoxfam
ID: 10846913
Sorry...I wass to busy working on th top half of the code I did not notice that...I have cleared that all up.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10847614
Okay - I had to start from scratch here to get the layout correct.

I've posted an online version:
http://www.pdgmedia.com/ee/alex.html

There is a new background image:
http://www.pdgmedia.com/ee/images/newback.gif

This is the new code. The styles are in the head of the page - just remove them and copy over everything in your stylesheet css file:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>The Pentecostals of Bradenton</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="pentecostals-bradenton 011, default">

<style type="text/css">

body       { margin:0; padding:0; background: #ffffff url("images/newback.gif") repeat-y top left; color:#000080; }
td,p       { font-family: verdana, arial, helvetica, sans-serif; }

.banner    { padding: 5px 0 0 10px; font-size: 11px; color: #ffffff; background-color: #ffffff; }
.top       { font-size: 12px; color: #ffffff; line-height: 18px; background-color: #323232; }
.rightside { font-size: 11px; color: #666666;  background-color: #ffffff; }

a:link     { color: #000066; }
a:visited  { color: #666666; }
a:hover    { color: #cccccc; }
a:active   { color: #cccccc; }

td#nav     { padding:50px 0 0 0; font-weight:bold; color:#FFFF66; }
td.main    { padding:10px 0 0 5px; background: #ffffff url(images/ocean.jpg) no-repeat top left; }
td.inside  { font-size: 13px; line-height: 24px; text-align:justify; }
h1         { font-size: 18px; font-weight:normal; letter-spacing: 4px; }
#footer    { padding: 40px 0 0 220px; font-size: 10px; }

</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" width="780">
  <tr>
    <td width="200" valign="top" id="nav" nowrap>

    <!--webbot bot="Include" U-Include="include_nav.htm" TAG="BODY" startspan -->

    <p style="padding:0 0 20px 10px;">The Pentecostals<br>of Bradenton</p>
    <p><a href="index.htm" onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln"><img border="0" src="images/nav_bar_home.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="images/nav_bar_home_mo.gif" width="180" height="25"></a></p>
    <p><a href="captians_log.htm" onmouseover="document['fpAnimswapImgFP2'].imgRolln=document['fpAnimswapImgFP2'].src;document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].lowsrc;" onmouseout="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln"><img border="0" src="images/nav_bar_cl.gif" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="images/nav_bar_cl_mo.gif" width="180" height="25"></a></p>
    <p><a href="port_of_call.htm" onmouseover="document['fpAnimswapImgFP3'].imgRolln=document['fpAnimswapImgFP3'].src;document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].lowsrc;" onmouseout="document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].imgRolln"><img border="0" src="images/nav_bar_poc.gif" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="images/nav_bar_poc_mo.gif" width="180" height="25"></a></p>
    <p><a href="javascript:void(0)" onmouseover="document['fpAnimswapImgFP4'].imgRolln=document['fpAnimswapImgFP4'].src;document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].lowsrc;" onmouseout="document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].imgRolln"><img border="0" src="images/nav_bar_bs.gif" id="fpAnimswapImgFP4" name="fpAnimswapImgFP4" dynamicanimation="fpAnimswapImgFP4" lowsrc="images/nav_bar_bs_mo.gif" width="180" height="50"></a></p>
    <p><a href="on_board_activities.htm" onmouseover="document['fpAnimswapImgFP5'].imgRolln=document['fpAnimswapImgFP5'].src;document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].lowsrc;" onmouseout="document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].imgRolln"><img border="0" src="images/nav_bar_oba.gif" id="fpAnimswapImgFP5" name="fpAnimswapImgFP5" dynamicanimation="fpAnimswapImgFP5" lowsrc="images/nav_bar_oba_mo.gif" width="180" height="50"></a></p>
    <p><a href="ships_calendar.htm" onmouseover="document['fpAnimswapImgFP6'].imgRolln=document['fpAnimswapImgFP6'].src;document['fpAnimswapImgFP6'].src=document['fpAnimswapImgFP6'].lowsrc;" onmouseout="document['fpAnimswapImgFP6'].src=document['fpAnimswapImgFP6'].imgRolln"><img border="0" src="images/nav_bar_sc.gif" id="fpAnimswapImgFP6" name="fpAnimswapImgFP6" dynamicanimation="fpAnimswapImgFP6" lowsrc="images/nav_bar_sc_mo.gif" width="180" height="25"></a></p>
    <p><a href="navigational_chart.htm" onmouseover="document['fpAnimswapImgFP7'].imgRolln=document['fpAnimswapImgFP7'].src;document['fpAnimswapImgFP7'].src=document['fpAnimswapImgFP7'].lowsrc;" onmouseout="document['fpAnimswapImgFP7'].src=document['fpAnimswapImgFP7'].imgRolln"><img border="0" src="images/nav_bar_nc.gif" id="fpAnimswapImgFP7" name="fpAnimswapImgFP7" dynamicanimation="fpAnimswapImgFP7" lowsrc="images/nav_bar_nc_mo.gif" width="180" height="50"></a></p>
    <p><a href="shore_excursions.htm" onmouseover="document['fpAnimswapImgFP8'].imgRolln=document['fpAnimswapImgFP8'].src;document['fpAnimswapImgFP8'].src=document['fpAnimswapImgFP8'].lowsrc;" onmouseout="document['fpAnimswapImgFP8'].src=document['fpAnimswapImgFP8'].imgRolln"><img border="0" src="images/nav_bar_se.gif" id="fpAnimswapImgFP8" name="fpAnimswapImgFP8" dynamicanimation="fpAnimswapImgFP8" lowsrc="images/nav_bar_se_mo.gif" width="180" height="50"></a></p>

    <!--webbot bot="Include" i-checksum="22231" endspan -->

    </td>
    <td width="580" valign="top" class="main">
    <p><img border="0" src="images/logo.jpg" width="170" height="175"><p>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="91" nowrap>&nbsp;</td>
        <td width="100%" class="inside">
        <h1>WELCOME ABOARD</h1>
        <p>The dark sky surrenders its place to the light of a new day. The sun
        rises on the horizon as a warm ocean breeze move across the water. Our
        journey of life begins new with another day of God’s grace stretching as
        far as the eye can see.</p>
        <p>Only the one who created the ocean knows what may lie ahead. All the
        beauty and mystery of unexplored places as well as the unpredictable
        storm clouds are in His master plan. The Word of God is the map by which
        we can safely navigate these uncharted waters.</p>
        <p>The Pentecostals of Bradenton invite you to join us as we set sail for
        life’s greatest adventure. We are a local church dedicated to providing
        you with God’s precious truth that will bring purpose and joy in this
        journey. Consider this invitation as your passport to book passage as we
        set a course for our ultimate destination, <b>HEAVEN</b>.</p></td>
        <td width="67" nowrap>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

<!--webbot bot="Include" U-Include="include_bot.htm" TAG="BODY" startspan -->
<p id="footer">Copyright © 2004 The Pentecostals of Bradenton, Design: <a href="http://www.latitudewebdesign.com">Latitude Web Design</a></p>
<!--webbot bot="Include" i-checksum="41808" endspan -->

</body>
</html>

Please let me know if you're okay with modifying your current page code...

Thanks,
Sean
0
 

Author Comment

by:alcoxfam
ID: 10849096
Thanks for the new code and sorry you have to reinvent the wheel.....I had try this before and I am running into the same problem.  What is happening since I have to put an embedded table for the text (for alignment), when I add new text to the bottom of the text table I get a white gap instead of the continuous background.  

I had replaced all the text on a test page as you said and everything looks and works great, expect for the white gap I keep getting between the two images....any ideas?

Here is the new code:

Page:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>The Pentecostals of Bradenton</title>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link REL="stylesheet" HREF="style_newpage.css" TYPE="text/css">
<meta name="Microsoft Theme" content="pentecostals-bradenton 011, default">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
</head>


<body>

<table border="0" cellpadding="0" cellspacing="0" width="780">
  <tr>
    <td width="200" valign="top" id="nav" nowrap>

    <!--webbot bot="Include" U-Include="include_nav.htm" TAG="BODY" -->

    </td>
    <td width="580" valign="top" class="main">
    <p><img border="0" src="images/logo.jpg" width="170" height="175"><p>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="466">
      <tr>
        <td width="91" nowrap height="466">&nbsp;</td>
        <td width="100%" class="inside" height="466">
        <h1>WELCOME ABOARD</h1>
        <p>The dark sky surrenders its place to the light of a new day. The sun
        rises on the horizon as a warm ocean breeze move across the water. Our
        journey of life begins new with another day of God’s grace stretching as
        far as the eye can see.</p>
        <p>Only the one who created the ocean knows what may lie ahead. All the
        beauty and mystery of unexplored places as well as the unpredictable
        storm clouds are in His master plan. The Word of God is the map by which
        we can safely navigate these uncharted waters.</p>
        <p>The Pentecostals of Bradenton invite you to join us as we set sail for
        life’s greatest adventure. We are a local church dedicated to providing
        you with God’s precious truth that will bring purpose and joy in this
        journey. Consider this invitation as your passport to book passage as we
        set a course for our ultimate destination, <b>HEAVEN</b>.</p></td>
        <td width="67" nowrap height="466">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

<!--webbot bot="Include" U-Include="include_bot.htm" TAG="BODY" -->

</body>
</html>

Css:

body       { margin:0; padding:0; background: #ffffff url('images/newback.gif') repeat-y top left; color:#000080 }
td, p       { font-family: verdana, arial, helvetica, sans-serif; }

.banner    { padding: 5px 0 0 10px; font-size: 11px; color: #ffffff; background-color: #ffffff; }
.top       { font-size: 12px; color: #ffffff; line-height: 18px; background-color: #323232; }
.rightside { font-size: 11px; color: #666666;  background-color: #ffffff; }

a:link     { color: #000066; }
a:visited  { color: #666666; }
a:hover    { color: #cccccc; }
a:active   { color: #cccccc; }

td#nav     { padding:50px 0 0 0; font-weight:bold; color:#FFFF66; }
td.main    { background: #ffffff url('images/ocean.jpg') no-repeat top left;; padding-left:5px; padding-right:0; padding-top:10px; padding-bottom:0 }
td.inside  { font-size: 13px; line-height: 24px; text-align:justify; }
h1         { font-size: 18px; font-weight:normal; letter-spacing: 4px; }
#footer    { padding: 40px 0 0 220px; font-size: 10px; }

Thanks again,
LA

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10849136
Sorry Alex...

Three changes - the last one is just a display issue...

1. Remove the background color from the cell:
td.main    { padding:10px 0 0 5px; background: url(images/ocean.jpg) no-repeat top left; }

2. Add the valign attribute to the td cell:
<td width="100%" class="inside" valign="top">

3. Add a bottom margin to the footer paragraph:
#footer    { padding: 40px 0 20px 220px; font-size: 10px; }
0
 

Author Comment

by:alcoxfam
ID: 10849363
Thanks that worked......

Any idea how I can get the include copywrite section at bottom to show up at the end and in a white background?


Thanks again!!!!!!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10849453
Absolutely - change the footer CSS to this:

#footer    { padding: 40px 0 20px 220px; font-size: 10px; background-color: #ffffff; }

Thanks,
Sean :-)
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:alcoxfam
ID: 10849636
Sorry is did not work.....I keep getting the repeat of the solid image on the background and if I add a new row it starts repeating the image from the beginning.

Thanks again for all your help....what a headache...last time I do someone a favor!!!!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10849679
It's okay - we'll sort it out.

Please post the link to the page again. I need to make sure the code is the same.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10849685
This is the page with 2 rows...
http://www.pdgmedia.com/ee/alex2.html
0
 

Author Comment

by:alcoxfam
ID: 10850785
Made all the changes to look like the page you posted and this is what I get............

http://www.aws-test.com/newpage_2.htm
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 10850941
New code:

http://www.pdgmedia.com/ee/alex.html

New background image for the body:
http://www.pdgmedia.com/ee/images/newback.gif

Thanks,
Sean

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10850967
I removed all that ridiculous FP dynamic animation code from my page because it writes itself into my web site.... just so you know...
0
 

Author Comment

by:alcoxfam
ID: 10851291
That is fine....everything works!!!!  Thanks again for all your time!

LA
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10863272
Don't forget to close out if everythings okay :-)

Thanks,
Sean
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10973883
Okay - I deleted the other Q for you - what would you like done with this one?

Thanks,
Sean
0
 

Author Comment

by:alcoxfam
ID: 10979729
This one can be deleted as well....thanks again
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10979778
I thought I had answered this one for you ?
http:#10851291
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now