2 Replies Latest reply on Apr 10, 2010 10:20 AM by Nancy OShea

    CSS Problem - Background repeat & Max/Min Width

    WRobN1 Level 1

      I have the problem at lower resolutions that the content div sticks out of the main document.

       

      Or in fact, the content isnt sticking out, its the background repeat that is in the right of the screen thats pushed into the doc.

       

      And also the background repeat isnt always repeating till bottom. It doesnt matter how big a negative margin is.

       

      WRONG.JPG

       

      How can i let the background repeat right stick to the end of the document instead of the width of screen?

      How can i let the repeat continue so it goeas all the way down?

       

      Here's the CSS:

       

      @charset "utf-8";
      /* CSS Document */
      
      /* Main Floats */
      
      html,body {
           height:auto;
           min-width:800px;
           width:auto;
            background: #FFFFFF url(../Art/Background.png) no-repeat center;
           background-attachment:fixed;
           color:#000;
           margin:auto;
      }
      
      #BackGrRepeat1{
           float:right;
           height:auto;
           width:auto;
           min-width:800px;
           background: transparent url(../Art/greenfade_right.png) repeat-y right top;
           background-attachment:fixed;
           margin-right:-0px;
           margin-top:-10px;
           margin-bottom:-150px;
      }
      
      #BackGrRepeat2{
           float:left;
           height:auto;
           width:auto;
           min-width:800px;
           background: transparent url(../Art/greenfade_left.png) repeat-y left top;
           background-attachment:fixed;
           margin-left:-0px;
           margin-top:-10px;
           margin-bottom:-150px;
      }
      
      #WContainer{
           margin: 10px auto; 
           width:80%;
           background:none;
           min-height:50%;
           line-height: 130%;
      }
      
      #WHeader{
           padding: .5em;
           }
           
      .TabbedPanelsContentGroup{
           min-width:600px;
      }
      
      .VTabbedPanels .TabbedPanelsTabGroup {
           float: left;
           width: 172px;
           background: none;
           margin: 0;
           margin-left:-3em;;
      }
      
      .VTabbedPanels .TabbedPanelsContentGroup {
           margin-left: 172px;
           min-height:18em;
           padding: 2em;
           border-left: solid 1px #999;
           border-bottom: solid 2px #999;
           border-top: solid 1px #999;
           border-right: solid 2px #999;
      }
      
      #WFooter{
           clear: both;
           margin: 0;
           padding: .5em;
      }
      
      /* Text Styles */
      
      h1{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#05692E;
      font-weight: bold;
      font-style:italic;
      font-size: 3em;
      line-height:105%;
      }
      
      h2{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#078330;
      font-weight: bold;
      font-size: 2em;
      line-height:105%;
      }
      
      p{
      font-family: "Verdana", verdana, arial, helvetica, sans-serif;
      font-size: 1em;
      margin-top: 0;
      }
      
      .small{
      font-family: "Trebuchet MS", verdana, arial, helvetica, sans-serif;
      font-size: .7em;
      text-align:center;
      }
      
      /* Menu Buttons */
      
      .TabbedPanelsTabGroup ul{
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      }
      
      .TabbedPanelsTabGroup li{
      list-style-type: none;
      padding: 0px;
      margin: 0px;
      }
      
      .Button a{display:block;} 
      .Button a:hover{background-position:left bottom;}
      a.Button {display:none}
      
      /* Text Images */
      
      .floatright
      {
      float: right;
      width: 100%;
      margin: 5px auto;
      background-color: #fff;
      padding: 5px;
      border-top: 1px solid #999;
      border-right: 2px solid #555;
      border-bottom: 2px solid #555;
      border-left: 1px solid #999;
      }
      
      div.floatright img
      {
      border-top: 2px solid #555;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      border-left: 2px solid #555;
      }
      
      .floatleft
      {
      float: left;
      width: 100%;
      margin: 5px auto;
      background-color: #fff;
      padding: 5px;
      border-top: 1px solid #999;
      border-right: 2px solid #555;
      border-bottom: 2px solid #555;
      border-left: 1px solid #999;
      }
      
      div.floatleft img
      {
      border-top: 2px solid #555;
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      border-left: 2px solid #555;
      }
      
      /* Message Screens */
      
      #message{
           margin: 50px;
           min-height:18em;
           padding: 2em;
           border-left: solid 1px #999;
           border-bottom: solid 2px #999;
           border-top: solid 1px #999;
           border-right: solid 2px #999;
      }