View Full Version : Help with tricky background tiles

May 15th, 2007, 02:22 PM
I need some help figuring out how to get this background to work the way I need it to. Please take a look at the attached image to see what I'm trying to accomlish. Let me know if it isn't clear.

Basically, I have a background image applied to the body the repeats on the x axis. Lets say that background image is 300px tall and it has a gradient in it. Once the content area on the site exceeds that 300px in height I want to have a different background tile start to fill in the open space (that would the the cyan colored part in the attached image) and should continue with the depth of the content. But it should exceed the content area. In other words I don't want it next to the footer. Hopefully the attached image will help explain this because I'm not sure I'm making sense here.

Please let me know if I can explain this better. By the way here is my current code if you need to take a look.

Current HTML (http://www.bridgepoint-int.com/dev/test.html) can be found here

Current CSS (http://www.bridgepoint-int.com/dev/includes/css/bpi.css) can be found here:

May 15th, 2007, 05:56 PM
Hello po3,
You need to nest divs to do something like that.
I put everything I changed in red:

<!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=ISO-8859-1">
<script type="text/javascript" src="test_files/ajaxtabs.js"><!-- Ajax Tabs Content script- � Dynamic Drive DHTML code library (www.dynamicdrive.com). This notice MUST stay intact for legal use. Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code --></script><title>Untitled Document</title>

<link href="test_files/bpi.css" rel="stylesheet" type="text/css"></head><body>
<div class="wrapper">

<!-- Main Nav Start -->

<ul id="mainNav" class="mir">
<li><a id="mir-a1" href="http://www.bridgepoint-int.com/dev/home.html">Home</a></li>
<li><a id="mir-a2" href="http://www.bridgepoint-int.com/dev/aboutUs.html">About Us</a></li>
<li><a id="mir-a3" href="http://www.bridgepoint-int.com/dev/activeProjects.html">Active Projects</a></li>
<li><a id="mir-a4" href="http://www.bridgepoint-int.com/dev/projectGuidelines.html">Project Guidelines</a></li>
<li><a id="mir-a5" href="http://www.bridgepoint-int.com/dev/CS_bilcom.html">Case Studies</a></li>
<li><a id="mir-a6" href="http://www.bridgepoint-int.com/dev/contact.html">Contact</a></li>
<li><img src="test_files/navEnd.gif"></li>
<li><a id="mir-a7" class="brand" href="http://www.bridgepoint-int.com/dev/home.html">BridgePoint International</a></li>

<!-- Sub Nav Start -->

<ul id="subNav">
<li><img src="test_files/subNav_left.gif"></li>
<li><a href="#">Bilcom</a>
<li><a href="#">Sample Link</a>
<li><a href="#">Sample Link</a></li>
<!--closes wrapper--></div>
<!-- Page Head Start -->
<div id="nested1">
<div id="nested2">
<div class="wrapper"> <h1 class="mir">Bilcom Profile</h1>

<!-- Tabs for content Start -->

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#default" rel="ajaxcontentarea">Profile</a></li>
<li class=""><a href="http://www.bridgepoint-int.com/dev/cs_tabs/bilcom_kp_show.html" rel="ajaxcontentarea">Key Points </a></li>
<li class=""><a href="http://www.bridgepoint-int.com/dev/cs_tabs/bilcom_tp_show.html" rel="ajaxcontentarea">Transformation Process</a></li>

<!-- Content Start -->
<!--<div id="csImage"> <img src="images/caseStudies/bilcomImg1.jpg" width="245" height="262" /> </div> -->

<div id="ajaxcontentarea" class="contentstyle">
<img id="csImage" src="test_files/bilcomImg1_ph.jpg" height="262" width="245">
ut venibh er si. Ut lobor sit lobore minit nit aut venim zzriurem ver
sit pratum zzrillaore cor augueraesse delisim in ut nis am, quat. </p>
<li>Xer si exerat aliquatem volore velit erciliquat
<li>il iriurer sit at ad ent ver sis alit, sequat venim vel do od eum illaorper </li>
<li>sim ipis doloreet estrud do dolorpe raessequam velis aliscilis </li>
<li>aliquis ciduisis nim quam duip eu feu feum aliquatue </li>
<li>duis nonseniam, consed elit praesto </li>
<li>commoloreet ilit wis nos nibh ent vullutpat lutat.</li>
qui er iriure molorper senim dionsequat ilit aci blamet adit lametummy
nulputem irit iureet at. Uscipit do odit dip eliquat. Duis nibh ea
feugiam consenim deliquam diatuer sisit lan vel utatumm oluptate
digniat. Voloborper senisl utem ipis nis nit ulpute commodo lenibh
etuerat. Duipit lutpat lortie do eumsandip ex ea ad digna alit
loreratet numsandit nonsed minibh exer sequisim dolobor in hent lumsan
henim niam quat.</p>

<p><b><a href="javascript: expandtab('maintab', 1)">Next</a></b></p>
<!--closes wrapper--></div>
<!--closes nested2--></div>
<!--closes nested1--></div><!-- Footer Start -->

<p id="footer">©2007 BridgePoint International. All Rights reserved.</p>

<script type="text/javascript">//Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.

version: 1.0
author: Erik Peterson
website: http://www.projecto3.com/

/* =General

/* Remove padding and margin */
* {
margin: 0;
padding: 0;

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
margin-left: 6px;
margin-right: 6px;

/* Class for clearing floats */
.clear {

/* Remove border around linked images */
img {
border: 0;

text-align: center;
margin-top: 40px;
font: "Times New Roman", Times, serif;
color: #858776;
font-size: 14px;
line-height: 22px;
#nested1 {
background: url(your other grad.gif here) repeat;
#nested2 {
background:url(http://www.bridgepoint-int.com/dev/images/common/blueTile_grad.gif) repeat-x;
/* =Typography

/*body {
font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
}*//* =layout

.wrapper { /* centers design on page */
margin-left: auto;
margin-right: auto;
width: 757px;
text-align: left;
background-color: white;

/*body{ It makes life very difficult when you spread tags out like this. Style body with one entry in your
CSS and it's a lot easier to find!
}*//* =Headings
h1 {
display: block;
color: #7a8ea2;
size: 36pt;
line-height: 53px;
padding-top: 22px;
border-top: solid 2px #d9b7ab;
border-bottom: solid 2px #d9b7ab;

May 15th, 2007, 10:31 PM

Very helpful, I made the changes you suggested and added a couple of tweaks and I think it's looking pretty good. So basically you just added the two divs and then they overlay eachother right? Nested2 shows up on top of nested1 to create the effect I was looking for. Thanks again.

Have a look. (http://www.bridgepoint-int.com/dev/test.html)

May 15th, 2007, 10:55 PM
sorry about the double post