Background / Content Integration help

Question

MylesDBaker 0 Light Poster

15 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).

Thanks,
Myles

html-css user-interface web-design

2 Contributors
1 Reply
241 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Arkinder

Dani AI

Generated 8 Months Ago

A concise diagnosis and practical fixes for the layout described by , with a note on ’s points.

The core issue is that the decorative image is on the page background, so transparent portions reveal the page-level color; when the image ends the same page color continues and that can clash with the intended content background. A reliable, CSS-only approach is to move the decorative image off the page background and onto the centered content container so the container’s background shows through transparent areas and continues as the content grows.

/* keep page sides separate; content container holds the decorative image */
body {
  background-color: lightgrey; /* page sides */
}
.page-wrapper {
  width: 650px;
  margin: 150px auto 10px;
  background: white url('decorative-top.png') no-repeat top center;
}

For modern browsers, a layered-background approach can reproduce a smooth fade that continues past the image: place the top decorative image over a CSS gradient that fills vertically. Provide a solid-color fallback for older browsers.

.page-wrapper {
  background:
    url('decorative-top.png') no-repeat top center,
    linear-gradient(to bottom, rgba(255,255,255,0) 60%, #ffffff 100%);
  background-repeat: no-repeat, repeat;
}

If this HTML is actually an email template, treat it differently: many mail clients ignore external styles and have poor PNG/alpha support (Outlook uses Word rendering). For email, keep the table structure, inline critical styles, slice the header into an image row and give the main content cell a solid background color. VML is required for background-image support in some Outlook versions. Final checklist: move stylesheet links into the head, stop using presentational <br> abuse, use a semantic wrapper for the decorative image, and test across target clients/browsers.

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