Member Avatar for shanenin

I have been messing around trying to figure out some basics of html/css. I have a tan background with a white table. I want the background only to show up on the left and right sides(table is centered). The problem is the background is showing up on the top and bottom also. Why is it doing this? How can I fix it?

<html>
<head>
    <title>test page</title>

    <style>
        body { background : url(images/tan-sponge.jpg) tan }
    </style>
</head>

<body>

<div align="center">
<table style="height: 100%;" valign="top" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="752">
    <tr>
        <td>
        </td>
    </tr>
</table>
</div>

</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by shanenin

Dani AI

Generated

A couple of things happening here explain the tan showing above and below the centered table.

Browsers give the page body a default margin, so a narrow centered box can sit away from the viewport edges and let the body background show through. Also, percent heights (for example height:100% on your table) only work when the parent has an explicit height — otherwise the element may not fill the viewport. ’s suggestion to zero out body margins fixes the common quick case; for a robust layout use a centered wrapper with an explicit/minimum height so the white area actually covers the full page.

A simple, modern pattern:

html, body {
  margin: 0;
  height: 100%;
  background: tan url("images/tan-sponge.jpg") repeat;
}

#wrap {
  width: 752px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;   /* ensures the white area fills the viewport */
  box-sizing: border-box;
}

Notes and troubleshooting:

  • If you prefer percentage heights instead of 100vh, set html, body { height:100% } and then give the wrapper min-height:100%. See MDN on how percentage heights work: Percentage heights on MDN.
  • Use min-height:100vh for a simpler, cross-browser way to make the white area fill the viewport.
  • Avoid align="center" and table-based layout for page framing; use CSS centering (margin: 0 auto) on a wrapper.
  • Make sure a standards DOCTYPE is present so browsers behave predictably (quirks mode can change default margins). See background and viewport-length notes on MDN: background and viewport-percentage lengths.

This preserves the tan texture on the sides while keeping the top and bottom white.

Recommended Answers

All 2 Replies

Member Avatar for FC Jamison 
<style>
    body { 
      background : url(images/tan-sponge.jpg) tan;
      margin:0px; 
      padding:0px; 
    }
  </style>
Member Avatar for shanenin

Thanks :-) I got so much to learn.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.