My container background color doesn't show through?

I'm working in Dreamweaver for the first time and I am relatively new to coding in general. I have my background color container value white, but instead of my body see through color. Here is my HTML, css and a screenshot of what it looks like now. I searched the Web for solutions for hours with success today, I appreciate any assistance!

<!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" />
<title>ThoroughQuest Acres</title>
<link href="styles/thoroughquest.css" rel="stylesheet" type="text/css" />

    
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_timelinePlay(tmLnName, myID) { //v1.2
  //Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
  if (myID == tmLn.ID) { //if Im newest
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j]; 
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
  } }
}

function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
  //Copyright 1998, 1999, 2000, 2001, 2002, 2003, 2004 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (numGotos != null)
    if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
    else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
  jmpFwd = (fNew > tmLn.curFrame);
  for (i = 0; i < tmLn.length; i++) {
    sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
    if (sprite.charAt(0) == "s") {
      numKeyFr = sprite.keyFrames.length;
      firstKeyFr = sprite.keyFrames[0];
      lastKeyFr = sprite.keyFrames[numKeyFr - 1];
      if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
      for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
      for (j=0; j<sprite.values.length; j++) {
        props = sprite.values[j];
        if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
        else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
        if (sprite.obj != null) {
          if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
          else        sprite.obj[props.prop2][props.prop] = props[propNum];
      } }
    } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
  }
  tmLn.curFrame = fNew;
  if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    var macIE5 = (navigator.platform ? (navigator.platform == "MacPPC") : false) && (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4);
    document.MM_Time = new Array(2);
    document.MM_Time[0] = new Array(2);
    document.MM_Time["Timeline1"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "Timeline1";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("sprite");
    document.MM_Time[0][0].slot = 1;
    if (ns4)
        document.MM_Time[0][0].obj = document["Image1"];
    else if (ns5)
        document.MM_Time[0][0].obj = document.getElementById("Image1");
    else
        document.MM_Time[0][0].obj = document["Image1"];
    document.MM_Time[0][0].keyFrames = new Array(1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50);
    document.MM_Time[0][0].values = new Array(1);
    document.MM_Time[0][0].values[0] = new Array("images/slideshow_right/ss_right_1.jpg","images/slideshow_right/ss_right_2.jpg","images/slideshow_right/ss_right_3.jpg","images/slideshow_right/ss_right_4.jpg","images/slideshow_right/ss_right_5.jpg","images/slideshow_right/ss_right_6.jpg","images/slideshow_right/ss_right_7.jpg","images/slideshow_right/ss_right_8.jpg","images/slideshow_right/ss_right_9.jpg","images/slideshow_right/ss_right_10.jpg","images/slideshow_right/ss_right_1.jpg");
    document.MM_Time[0][0].values[0].prop = "src";
    document.MM_Time[0][1] = new String("behavior");
    document.MM_Time[0][1].frame = 26;
    document.MM_Time[0][1].value = "MM_timelineGoto('Timeline1','1')";
    document.MM_Time[0].lastFrame = 50;
    document.MM_Time[1] = new Array(1);
    document.MM_Time["Timeline2"] = document.MM_Time[1];
    document.MM_Time[1].MM_Name = "Timeline2";
    document.MM_Time[1].fps = 15;
    document.MM_Time[1][0] = new String("sprite");
    document.MM_Time[1][0].slot = 1;
    if (ns4)
        document.MM_Time[1][0].obj = document["Image2"];
    else if (ns5)
        document.MM_Time[1][0].obj = document.getElementById("Image2");
    else
        document.MM_Time[1][0].obj = document["Image2"];
    document.MM_Time[1][0].keyFrames = new Array(1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50);
    document.MM_Time[1][0].values = new Array(1);
    document.MM_Time[1][0].values[0] = new Array("images/slideshow_left/ss_left_1.jpg","images/slideshow_left/ss_left_2.jpg","images/slideshow_left/ss_left_3.jpg","images/slideshow_left/ss_left_4.jpg","images/slideshow_left/ss_left_5.jpg","images/slideshow_left/ss_left_6.jpg","images/slideshow_left/ss_left_7.JPG","images/slideshow_left/ss_left_8.JPG","images/slideshow_left/ss_left_9.jpg","images/slideshow_left/ss_left_10.jpg","images/slideshow_left/ss_left_1.jpg");
    document.MM_Time[1][0].values[0].prop = "src";
    document.MM_Time[1].lastFrame = 50;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>
<link href="styles/tqa_menu.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_timelinePlay('Timeline1')">

<div id="container">
  <div id="logo"><img src="images/TQA_Header_Logo.gif" alt="TQA Logo" /></div>
  
  <div id="left_slideshow"><img src="images/slideshow_left/ss_left_1.jpg" alt="Secret" name="Image2" /></div>
                    
  <div id="right_slideshow"><img src="images/slideshow_right/ss_right_1.jpg" alt="Shania Field" name="Image1" /></div>
  
  <div id="navigation">
    <ul id="tqa_menu" class="MenuBarHorizontal">
      <li><a href="index2.html">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
          <ul>
            <li><a href="facility.html">Facility</a></li>
            <li><a href="staff.html">Staff</a></li>
          </ul>
      </li>
      <li><a class="MenuBarItemSubmenu" href="#">Services</a>
          <ul>
            <li><a href="boarding.html">Boarding</a> </li>
            <li><a href="lessons_training.html">Lessons &amp; Training</a></li>
            <li><a href="swim_therapy.html">Swim Therapy</a></li>
          </ul>
      </li>
      <li><a href="sales.html">Sales &amp; Leasing</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Horse Shows</a>
        <ul>
          <li><a href="showing.html">2012 Season</a></li>
          <li><a href="open_series.html">TQA Open Series</a></li>
        </ul>
      </li>
      <li><a href="news.html">News</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
  
  <div id="left_column"><p> </p><h2>Upcoming Events</h2>
  <p><strong>*NIHJA Year End Banquet</strong><br />Friday, November 18th, 2011<br />Cocktails 6pm, Dinner 7pm</p>
  <p><strong>*Girl's Night Out</strong><br />Sunday, November 20th, 2011<br />7pm-9pm</p>
  <p><strong>*TQA/SOF Holiday Party</strong><br />Saturday, December 10th, 2011<br />7pm-10pm<br /><i>Click Here</i> for more information!</p></div>
  
  <div id="main_content">
  <div id="Faded_Logo"><img src="images/Logo_Faded.gif" height="175" width="175" alt="TQA" /></div>
    <h1>Welcome to ThoroughQuest Acres</h1>
    <h4> </h4>
    <h3>ThoroughQuest Acres is a hunter/jumper training facility committed to the full development of both horse and rider, and you will find a strong incorporation of dressage in all of our training, providing the suppleness and balance needed for a truly successful jumping team. We are set back off the main road on 15 beautiful acres. ThoroughQuest is a family-owned business that takes pride in it's professional, knowledgeable staff and providing a warm, welcoming environment.</h3>
    <h3>Conveniently located in Port Barrington, IL, easily acessible from Chicago's northwest suburbs and just 45min from downtown Chicago.</h3>
  </div>
    
  <div id="footer"><p>&#169; 2011 ThoroughQuest Acres<span class="separator">|</span>28044 W Roberts Rd<span class="separator">|</span>Port Barrington, IL<span class="separator">|</span>60010<span class="separator">|</span>T 847.452.1789<span class="separator">|</span>F 630.365.1379</p></div>
  
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("tqa_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

@charset "UTF-8";
/* CSS Document */

body {
    background-color: #FFFFFF;
    background-image: url(../images/grey_bg_painted.jpg);
    background-repeat: repeat;
    height: 100%;
}

#container {
    position: relative;
    width: 1093px;
    height: 100%;
    margin: 0 auto;
    background: #ffffff;
}
    
    html>body div#container {
        height: auto;
        min-height: 100%;
    }

#logo {
    position: relative;
    top: 0px;
    left: 0px;
    height: 300px;
    width: 1093px;
    z-index: 10;
}

#left_slideshow {
    float: left;
    width: 547px;
    height: 263px;
    margin: -132px 0 0 0;
    border-top: 5px;
    border-bottom: 40px solid #000000;
}

#right_slideshow {
    float: left;
    width: 546px;
    height: 263px;
    margin: -132px 0 0 0;
    border-top: 5px;
    border-bottom: 40px solid #000000;
}

#tqa_menu {
    position: absolute;
    left: 0px;
    top: 438px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 35px;
}

#left_column {
    float: left;
    display: inline;
    width: 25%;
}

#main_content {
    float: left;
    width: 75%;
    z-index: 10;
}

#Faded_Logo {
    position: absolute;
    left: 900px;
    bottom: -1030px;
}

#footer {
    position: absolute;
    bottom: -1093px;
    left: 1px;
    background: transparent url(../images/TQA_Footer_Gradient.jpg) no-repeat;
    height: 50px;
    width: 1093px;
}

    div#footer p {
        text-align: center;
        padding: 25px 0 0 0;
        color: #fff;
        margin: 0 0 0 -20px;
        font: 11pt "Trebuchet MS", verdana, arial, sans-serif;
    }
    div#footer .separator { color: #000000; margin: 0 10px; }

h1 {
    font-family: "Monotype Corsiva", cursive, sans-serif;
    font-size: 24pt;
    font-style: italic;
    font-weight: bold;
    color: #990000;
    letter-spacing: 0.25em;
    margin-left: 30px;
}

h2 {
    font-family: "Monotype Corsiva", cursive, sans-serif;
    font-size: 20pt;
    font-style: italic;
    font-weight: bold;
    color: #000000;
    margin-left: 20%;
    margin-right: 10px;
    line-height: 100%;
    word-spacing: 0.25em;
}

h3 {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-weight: normal;
    color: #000000;
    margin-left: 20px;
    margin-right: 10px;
    line-height: 180%;
    word-spacing: 0.25em;
}

p {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000000;
    margin-left: 30px;
    line-height: 100%;
}

twise89 wrote:

I noticed that my page was loading my footer seems to lie behind the images of the first two

Add clear: both; in the 'footer' (as illustrated below) css selector

#footer {}

Background: transparent url (.. / images/TQA_Footer_Gradient.jpg) no-repeat;

Clear: both;

}

Tags: Dreamweaver

My container background color doesn't show through?

Similar Questions

Maybe you are looking for