?
Solved

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

Posted on 2004-04-16
23
Medium Priority
?
397 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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
 

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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. 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 : Open Page or Post…
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…

770 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