Background / Content Integration help

Question

MylesDBaker 0 Light Poster

13 Years Ago

Dear All,

I am running into issues integrating an image with content and automatically integrated background colors.

Currently my style sheet has the following definition:

body {
	background:#657491 url("http://www.baylor.edu/content/imglib/144243.gif")  no-repeat top;
	margin: 150px 10px 10px 10px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #657491;
	font-size: 11px;
}

When I integrate my background image with the existing content everything plays nicely until I reach the end of the image, where I transition to color #657491, which works really well for the sides. I wanted some of the image to be transparent behind the content so I faded the background image itself, which works really well aesthetically.

The problem I have is, when the content exceeds the image I need another color to grow dynamically or else everything looks off.

Can anyone help me get this right? Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<blockquote>
  <p>
    <!-- <style type="text/css">
<!--
a
	{color:#0040FF}
a.visited
	{color:#004031}
a.active
	{color:#004031}
body
	{font-family:Calibri;
	font-size:12pt;
	background-color:#fdf5af}

</style> -->
    <!--<link rel="stylesheet" href="style[2]bu.css" type="text/css" media="screen" />-->
    <link rel="stylesheet" href="http://www.baylor.edu/content/services/document.php/144220.css" type="text/css" media="screen" />
  </p>
</blockquote>
<table width="625" align="center" cellspacing="0" background-color="#FFFFFF" >
<tbody>
  <tr>
    <td colspan="3"><table width="650" height="300" border="0px" align="center" cellspacing="0px" background-color="#FFFFFF" >
      <tbody>
        <tr>
          <!--<td colspan="3"><img src="http://www.baylor.edu/content/imglib/60223.gif" alt="Line" align="top" width=650 height=78></td>-->
        </tr>
        <tr>
          <td width="10" valign="top" >&nbsp;</td>
          <td width="450" valign="top" ><h2>Dear BIC Alumni,</h2>
            <p>Summer greetings from the Baylor Interdisciplinary Core Office!* We are excited to announce a few changes and  updates to the program in the last year: Poverty Simulation is now a part of  the Examined Life curriculum.* BIC  students are inserted into simulated poverty overseen by Mission Waco. Students  are encouraged to reflect upon the way their perspective on poverty changes  after the activity.* Drs. Sam Perry and  Candi Cann will be joining our faculty in the fall.* Sam Perry is a BIC graduate who earned his  Ph.D. from _____________ in ____________ and Candi Cann is traveling to Waco,  TX from Kaneohe, HI after receiving her Ph.D. in Religion from Harvard Graduate  School. </p>
            <p>This last year BIC hosted an alumni Homecoming event and we are  pleased to announce plans to continue this great tradition! This year, BIC  graduates Abby and John Garland will look back at how the BIC helped shape  their futures. We will be tailgating the Homecoming game and want to see you  all there! </p>
            <p>We are putting together an alumni newsletter to update you on the  program and provide details about the Homecoming festivities.&nbsp;We’d like to  include alumni updates and milestones in the newsletter.&nbsp; If you have an  update or testimonial to share about your Baylor Odyssey, please reply to this  email by July 27th (less than 50 words if possible).&nbsp; Pictures are  welcome!</p></td>
          <td align="center" width="85">
            <p><a href="http://www.facebook.com/pages/Baylor-Interdisciplinary-Core/243931592285667?sk=info&#!/pages/Baylor-Interdisciplinary-Core/243931592285667?sk=wall"><img src="http://www.baylor.edu/content/imglib/144030.gif" width="80" align="center"/></a></p>
            <p></p>
            <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F%3Fref%3Dlogo%23%21%2Fpages%2FBaylor-Interdisciplinary-Core%2F243931592285667%3Fsk%3Dinfo&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:60px; height:21px;" allowtransparency="true"></iframe>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p></p>
            <p>&nbsp;</p>
            <p>&nbsp;</p></td>
          <td width="30"></td>
        </tr>
        <tr>
          <td valign="top" >&nbsp;</td>
          <td valign="top" align="center" style="font-size:8pt; font-family:verdana,arial">
<span class="verdana10">
<br If you want to insert more text, .../> IF!
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../> IF!
<br If you want to insert more text, .../> IF!
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../>
<br If you want to insert more text, .../> IF!
</span><br></td>
          <td>&nbsp;</td>
          <td></td>
        </tr>
        <tr>
          
        </tr>
      </tbody>
    </table>      <a href="redir.aspx?C=ccaaba16a7c04918a4e51f88584a90f6&amp;URL=http%3a%2f%2fwww.baylor.edu%2fcontent%2fservices%2femail_link.aspx%3fl%3dfFRFYBgZfllfWXpXGxFfqA%3d%3d" title="http://www.baylor.edu" target="_blank"></a></td>
  </tr>
</tbody>
</table>
<center>
 
 <!-- Colors: #1A2134 (dark Blue), #E9EBEF (light sky blue) -->
 
<table border="0" cellspacing="0" width="645" bgcolor="#1A2134">
<tbody>
<tr>
<td valign="top" align="center" style="font-size:8pt; color: #E9EBEF; font-family:verdana,arial">
<span class="verdana10">Copyright © <a href="redir.aspx?C=ccaaba16a7c04918a4e51f88584a90f6&amp;URL=http%3a%2f%2fwww.baylor.edu%2fcontent%2fservices%2femail_link.aspx%3fl%3dfFRFYBgZfllfWXpXGxFy" title="http://www.baylor.edu/" target="_blank">
Baylor® University</a>. All rights reserved. <a href="redir.aspx?C=ccaaba16a7c04918a4e51f88584a90f6&amp;URL=http%3a%2f%2fwww.baylor.edu%2fcontent%2fservices%2femail_link.aspx%3fl%3dfFRFYBgZfllfWXpXGxhfrw%3d%3d" title="http://www.baylor.edu/about/trademarks/" target="_blank">
Trademark/DMCA</a> information. <a href="redir.aspx?C=ccaaba16a7c04918a4e51f88584a90f6&amp;URL=http%3a%2f%2fwww.baylor.edu%2fcontent%2fservices%2femail_link.aspx%3fl%3dfFRFYBgZfllfWXpXGxV2" title="http://www.baylor.edu/about/web_priv/" target="_blank">
Privacy statement</a>.<br>
Baylor University&nbsp;&nbsp;Waco, Texas 76798&nbsp;&nbsp;1-800-BAYLOR-U<br>
</span><br></td>
</tbody>
</table>
</center>
</body>
</html>

File can be found here (although it doesn't seem to integrate the style doc well when I send it in this fashion).

http://www.baylor.edu/content/servic...hp/144260.html

Thanks,
Myles

html-css web-design

2 Contributors
1 Reply
229 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Arkinder 93 Posting Pro in Training · Answer 1 · 2011-07-21T10:03:15+00:00

Hi Myles,

You're using tables for layout - don't. Half of your code is deprecated.

<link rel="stylesheet" href="http://www.baylor.edu/content/services/document.php/144220.css" type="text/css" media="screen" />

This belongs in your head tags. Also, you aren't parsing any XML data so use an HTML doctype.

Your link is broken. Since you are already using a background color you would have to have another element that only appears once the content has exceeded the image. HTML and CSS cannot do this. However, JavaScript, possibly jQuery, and PHP can.

Oh, and

<br If you want to insert more text, .../>

Should be done with a comment.

<!-- If you want to insert more text, ... -->
<br /> IF!
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /> IF!
<br /> IF!
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /> IF!

Regards
Arkinder