1 Reply Latest reply on Mar 14, 2010 3:17 AM by BenPleysier

    background image to HTML table without repeating

    dreaming of weaving

      How can I get one background image in a HTML table without repeating. Also, I want to make sure the site is centered on the page.

       

      http://happynick.com/play2/index2.html

       

      Please email nicolaif@hotmail.com

        • 1. Re: background image to HTML table without repeating
          BenPleysier Adobe Community Professional & MVP

          First of all please remove the double quote after bgcolor in

          <body bgcolor="#000000"" text="#ffffff" link="#999999" vlink="#999999" alink="#999999"> remove the " after the bgcolor

          dreaming of weaving wrote:

           

          How can I get one background image in a HTML table without repeating. Also, I want to make sure the site is centered on the page.

           

          http://happynick.com/play2/index2.html

           

          Please email nicolaif@hotmail.com

          Please read the following article http://snook.ca/archives/html_and_css/applying_a_back which basically says that it is not possible to apply a background image to a table or any of its components.

           

          To achieve what you want and in line with modern web design techniques, why don't you style your site using CSS as per following example:

           

          <!DOCTYPE html>
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Untitled Document</title>
          <style type="text/css">
          <!--
          body {
              font: 100% Verdana, Arial, Helvetica, sans-serif;
              margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
              padding: 0;
              background-color: #000000;
              background-repeat: no-repeat;
              color: #FFFFFF;
              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 */
          }
          a:link {
              text-decoration: none;
          }
          a:visited {
              text-decoration: none;
          }
          a:hover {
              text-decoration: none;
              color: #FFFFFF;
          }
          a:active {
              text-decoration: none;
          }
          #container {
              width: 900px; /* width of the page */
              background: #000000 url(http://happynick.com/play2/backgroundphotos/ParadiddleIndexBand.jpg) no-repeat center top;
              margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
              text-align: left; /* this overrides the text-align: center on the body element. */
          }
          #mainContent {
              height: 600px; /* height of the page */
              padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
          }
          #paradiddle {
              padding-top: 250px;
          }
          #company {
              color: #FFF;
          }
          #play {
              color: #F00;
          }
          .copyright {
              font-family: Helvetica, Geneva, Arial, sans-serif;
              font-size: 12px;
              font-style: normal;
              line-height: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              color: #999999;
              text-decoration: none;
              background-color: #000000;
              background-position: left center;
              text-align: center;
              vertical-align: middle;
          }
          .headertitles {
              font-family: Helvetica, Verdana, Arial, sans-serif;
              font-size: 18px;
              font-style: normal;
              line-height: normal;
              font-weight: lighter;
              font-variant: normal;
              text-transform: none;
              color: #999999;
              text-decoration: none;
              background-color: #000000;
              background-position: left center;
              text-align: left;
              vertical-align: middle;
              white-space: normal;
          }
          .headertitleschoosen {
              font-family: Helvetica, Verdana, Arial, sans-serif;
              font-size: 18px;
              font-style: normal;
              line-height: normal;
              font-weight: lighter;
              font-variant: normal;
              text-transform: none;
              color: #CC0000;
              background-color: #000000;
              letter-spacing: normal;
              text-align: left;
              vertical-align: middle;
              word-spacing: normal;
              white-space: normal;
              text-decoration: none;
          }
          -->
          </style></head>
          <body>
          <div id="container">
            <div id="mainContent">
            <div id="paradiddle"><a href="index.html"><img src="http://happynick.com/play2/logos/paradiddlelogoblock.jpg" width="200" height="100" alt="Paradiddle The Play Logo" border="0" /></a></div>
            <div id="company"><a href="company.html" class="headertitles">the company</a></div>
            <div id="play"><a href="index.html" class="headertitleschoosen">the play</a></div>
          <!-- end #mainContent --></div>
          <!-- end #container --></div>
          </body>
          </html>

           

          I hope this helps.

          Ben