4 Replies Latest reply on Mar 13, 2010 11:24 AM by Nancy OShea

    Background image not displaying

    starsavage

      I'm developing pages that will each have a different background image. i've defined a div with the bg image in it and put that div in the code, but the bg image doesn't show up. i've also tried adding a bg color to the div and that doesn't show up either, so i'm sure it's not a path or file name issue. css & code below.

       

      @import url("./whitespace-reset.css");
      @charset "UTF-8";
      body  {
          margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
          padding: 0;
          text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
          color: #000000;
          font-family: Verdana, Arial, Helvetica, sans-serif;
      }
      #container  {
          width: 761px; /* the auto margins (in conjunction with a width) center the page */
          border: 0;
          text-align: left; /* this overrides the text-align: center on the body element. */
          height: 871px;
          margin: 0;
          padding: 0;
          background: #FFFFFF;
      }
      #header  {
          height: 148px;
          width: 761px;
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 0px 0px;
      }
      #leftside {
          width: 158px;
          float: left;
          margin-top: -38px;
          padding: 0px 0px 0px 0px;
      }
      #leftside .menu img {
          display: block;
          margin: 0;
      }
      #leftside  ul.menu {
          padding: 0px 0px 0px 0px;
          font-style: none;
          margin: 0;
      }
      #leftside ul.menu li {
          display: inline;
          float: left;
          margin: 0;
          padding: 0;
          list-style: none;
      }
      #leftspacer {
          width: 31px;
          float: left;
          height: 723px;
          margin-top: -38px;
          padding-right: 10px;
          background-image: url(images/home_spacer_left.jpg);
          background-repeat: no-repeat;
      }
      #top  {
          margin-top: 0px;
          height: 38px;
          padding: 0px 0px 0px 0px;
      }
      #top ul.menu {
          margin-top: 0px;
          margin-left: 189px;
          float: left;
          padding: 0px 0px 0px 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          list-style: none;
      }
      #top ul.menu li {
          display: inline;
          list-style: none;
          float: left;
          margin: 0;
          padding: 0;
      }
      #bottom {
          height: 22px;
          left: 468px;
      }
      #bottom ul.menu {
          margin-top: 300px;
          margin-right: -23px;
          float: left;
          margin-left: -61px;
          list-style: none;
      }
      #bottom ul.menu li {
          display: inline;
          list-style: none;
          float: left;
      }
      #mainContent  {
          margin: 0px 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
          padding: 0 0 0 0;
      }
      #facilitiesContent {
          background: #990000 url(images/facilities_bg.jpg) repeat;
          padding: 0;
          height: 208px;
          margin: 0;
          width: 573px;
      }

      #footer  {
          padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
          background:#c0b7b2;
          height: 22px;
      }
      #threepix {
          margin-left: 189px;
          margin-right: 0px;
          height: 114px;
      }
      #col1 {
          position: relative;
      }
      #col1-a {
          position: absolute;
          width: 275px;
          right: 0px;
          top: 0px;
      }
      #col1-b {
          position: absolute;
          right: 0px;
          width: 275px;
          top: 0px;
      }
      #pixcopyleft {
          margin-left: 189px;
          font-size: 1em;
          font-family: Arial, Helvetica, sans-serif;
          margin-top: 10px;
      }
      #pixcopyright {
          font-size: 1em;
          margin-left: 189px;
          font-family: Arial, Helvetica, sans-serif;
          margin-top: 10px;
      }
      #footer ul.menu {
          margin-left: 189px;
          margin-right: 0px;
          margin-top: -22px;
          padding: 0px 0px 0px 0px;
          float: left;
      }
      #footer ul.menu li {
          display: inline;
          list-style: none;
          padding: 0px 0px 0px 0px;
          float: left;
      }
      #footer  p  {
          margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
          padding: 10 0;
      }
      img.imageleft {
          float: left;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      img.imageright {
          float: right;
          padding: 5px 0px 5px 5px;
          text-align: right;
      }
      .imagecenter {
          text-align: center;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
          float: right;
          margin-left: 0px;
          padding: 5px 5px 5px 5px;
      }
      .fltlft { /* this class can be used to float an element left in your page */
          float: left;
          margin-right: 8px;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
          clear:both;
          height:0px;
          font-size: 1px;
          line-height: 0px;
      }
      h1 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 1em;
          font-weight: bold;
          margin-bottom: 3px;
      }

       

       

      <!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>Core PIlates Studio </title>

       

      <link href="core.css" rel="stylesheet" type="text/css" />

       

      <body bgcolor="#c0b7b2" onload="MM_preloadImages('images/nav_main_ourteam_roll.jpg')">

       

      <!--[if IE 5]>

       

      <style type="text/css">

       

      /* place css box model fixes for IE 5* in this conditional comment */

       

      .thrColFixHdr #sidebar1 { width: 180px; }

       

      .thrColFixHdr #sidebar2 { width: 190px; }

       

      </style>

       

      <![endif]--><!--[if IE]>

       

      <style type="text/css">

       

      /* place css fixes for all versions of IE in this conditional comment */

       

      .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }

       

      .thrColFixHdr #mainContent { zoom: 1; }

       

      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

       

      </style>

       

      <![endif]-->

       

      <script type="text/javascript">

       

      <!--

       

      function MM_swapImgRestore() { //v3.0

       

        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

       

      }

       

      function MM_preloadImages() { //v3.0

       

        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

       

          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

       

          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

       

      }

       

      function MM_findObj(n, d) { //v4.01


        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
        if(!x && d.getElementById) x=d.getElementById(n); return x;
      }

       

      function MM_swapImage() { //v3.0
        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
      }
      //-->
      </script>
      <meta name="description" content="Core Pilates Studio is a classical, fully equipped pilates and Gyrotonic studio convenienly located near Vassar College in Poughkepsie, NY. We offer classical pilates, Gyrotonic and Gyrokinesis in private, semi-private and group sessions." />
      <meta name="keywords" content="core pilates studio, pilates, core, gyrotonic, gryokinesis, joeseph pilates, pilates in poughkeepsie, pilates in ny, pilates in new york" />
      </head>
      <body onload="MM_preloadImages('images/nav_main_home_roll.jpg','images/nav_main_programs_roll.j pg','images/nav_main_schedule_roll.jpg','images/nav_main_rates_roll.jpg','images/nav_main_ ourteam_roll.jpg','images/nav_main_contactus_roll.jpg')">
      <div id="container">
         <div id="header">   
          <img src="images/home_header.jpg" align="left" /><a href="index.html"><img src="images/home_logo_core.jpg"></a>     
        <!-- end #header --></div>
      <div id ="top">
        <ul class="menu">
            <li><a href="facilities.html"><img src="images/subnav_studio_facilities_down.jpg" class="menu"></a></li>
             <li><a href="rates.html"><img src="images/subnav_studio_rates_up.jpg" class="menu"></a></li>
             <li><a href="hours.html"><img src="images/subnav_studio_hours_up.jpg" class="menu"></a></li>
             <li><a href="policies.html"><img src="images/subnav_studio_polocies_up.jpg" class="menu"></a></li>
             <li><a href="directions.html"><img src="images/subnav_studio_directions_up.jpg" class="menu"></a></li>
             <li><a href="contact-us.html"><img src="images/subnav_studio_contactus_up.jpg" class="menu"></a></li>
             <li><img src="images/subnav_studio_back.jpg" class="menu"></li>
        </ul>
        <!-- end #"top" --></div>
       
        <div id="leftside">
      <ul class="menu">
            <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav_main_home_roll.jpg',1)"><img src="images/nav_main_home_up.jpg" name="home" width="158" height="39" border="0" id="home" /></a></li>
            <li><a href="programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/nav_main_programs_roll.jpg',1)"><img src="images/nav_main_programs_up.jpg" name="programs" width="158" height="39" border="0" id="programs" /></a></li>
            <li><a href="the-studio.html"><img src="images/nav_main_thestudio_down.jpg"></a></li>
            <li><a href="schedule.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('schedule','','images/nav_main_schedule_roll.jpg',1)"><img src="images/nav_main_schedule_up.jpg" name="schedule" width="158" height="39" border="0" id="schedule" /></a></li>
            <li><a href="rates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rates','','images/nav_main_rates_roll.jpg',1)"><img src="images/nav_main_rates_up.jpg" name="rates" width="158" height="39" border="0" id="rates" /></a></li>
            <li><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact us','','images/nav_main_contactus_roll.jpg',1)"><img src="images/nav_main_contactus_up.jpg" name="contact us" width="158" height="39" border="0" id="contact us" /></a><a href="our-team.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('our team','','images/nav_main_ourteam_roll.jpg',1)"><img src="images/nav_main_ourteam_up.jpg" name="our team" width="158" height="39" border="0" id="our team" /></a></li>
            <li><img src="images/nav_main_space_below.jpg" /></li>
            <li><a href="mailto:test@test.com"><img src="images/home_email.jpg" /></a></li>
            <li><img src="images/home_address.jpg" /></li>
            <li><a href="special-programs.html"><img src="images/home_logo_special.jpg" /></a></li>
         </ul>
      <!-- end #leftside --></div>
      <div id="leftspacer"></div>
       
      <div id="facilitesContent">
      <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
            <h1 align="right">What is Pilates?</h1>
            <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
          <div id="pixcopyright"><img src="images/images/facilaties_page_images_03.jpg" class="imageright">
          <h1 align="right">What is Pilates?</h1>
             <div align="right">Whether you're a world class athlete, a couch potato, recovering from an injury, new to excercising, old, young or in between you can benefit from Pilates.</div></div><br /><br />
        <!-- end #facilitiesContent --></div>

        <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
         <ul class="menu"> 
             <li><img src="images/nav_bottom_left_space.jpg"></a></li>
             <li><a href="index.html"> <img src="images/nav_bottom_home.jpg"></a></li>
             <li><a href="programs.html"> <img src="images/nav_bottom_program.jpg"></a></li>
             <li><a href="the-studio.html"> <img src="images/nav_bottom_thestudio.jpg"></a></li>
             <li><a href="schedule.html"> <img src="images/nav_bottom_schedule.jpg"></a></li>
             <li><a href="rates.html"> <img src="images/nav_bottom_rates.jpg"></a></li>
             <li><a href="our-team.htm"> <img src="images/nav_bottom_ourteam.jpg"></a></li>
             <li><a href="contact-us.html"> <img src="images/nav_bottom_contactus.jpg"></a></li>
         </ul>
        <!-- end #footer --></div>

       

      <!-- end #container --></div>
      </body>
      </html>