• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 420
  • Last Modified:

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

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
alcoxfam
Asked:
alcoxfam
  • 12
  • 8
1 Solution
 
seanpowellCommented:
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
 
hhammashCommented:
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
 
alcoxfamAuthor Commented:
Here is the link!

http://www.aws-test.com
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
seanpowellCommented:
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
 
alcoxfamAuthor Commented:
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
 
seanpowellCommented:
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
 
alcoxfamAuthor Commented:
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
 
seanpowellCommented:
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
 
alcoxfamAuthor Commented:
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
 
seanpowellCommented:
Absolutely - change the footer CSS to this:

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

Thanks,
Sean :-)
0
 
alcoxfamAuthor Commented:
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
 
seanpowellCommented:
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
 
seanpowellCommented:
This is the page with 2 rows...
http://www.pdgmedia.com/ee/alex2.html
0
 
alcoxfamAuthor Commented:
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
 
seanpowellCommented:
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
 
seanpowellCommented:
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
 
alcoxfamAuthor Commented:
That is fine....everything works!!!!  Thanks again for all your time!

LA
0
 
seanpowellCommented:
Don't forget to close out if everythings okay :-)

Thanks,
Sean
0
 
seanpowellCommented:
Okay - I deleted the other Q for you - what would you like done with this one?

Thanks,
Sean
0
 
alcoxfamAuthor Commented:
This one can be deleted as well....thanks again
0
 
seanpowellCommented:
I thought I had answered this one for you ?
http:#10851291
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 12
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now