Member Avatar for cuddlers89

how do i make the backround of the page a different color than the centered text just like on the page i mentioned in my first post?

  • 5 Contributors
  • 6 Replies
  • 367 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by tarwara

Dani AI

Generated

Short answer for : use CSS for the page background and put your centered content inside a fixed-width (or max-width) container with its own background. That keeps the page color separate from the content area, is responsive, and avoids using tables or deprecated attributes. ’s old example shows the idea; was right to point to stylesheets — here’s a modern, practical pattern that builds on those posts.

<style>
:root { --page-bg:#f2f2f2; --panel-bg:#ffffff; }

* { box-sizing: border-box; }
html,body { height:100%; margin:0; background-color:var(--page-bg); font-family:Arial, sans-serif; }
.container {
  max-width:900px;
  margin:32px auto;
  background-color:var(--panel-bg);
  padding:24px;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
</style>

<body>
  <div class="container">
    <!-- centered content goes here -->
  </div>
</body>

Notes and quick tips:

  • Prefer max-width + margin: 0 auto to center; it keeps layouts responsive. This replaces the old table-for-layout approach you see earlier in the thread.
  • Use semantic elements (<main>, <header>) inside .container where appropriate.
  • Keep an accessible contrast ratio between text and the panel background (aim for at least 4.5:1 for normal text). was right that named colors work, but hex/RGBA or CSS variables give more control.
  • If you want a background image (as mentioned), always set a solid background-color first as a fast fallback; use background-size: cover and background-position: center for full-bleed images.
  • Troubleshooting: if the page background or panel doesn’t appear, check for CSS specificity conflicts, missing stylesheet links, or transparent backgrounds on the container. Use browser DevTools to inspect computed styles.

Recommended Answers

All 6 Replies

Member Avatar for Slade

Well it works like this.

<HTML>

<Head>
<title>Zorba</title>
</head>
<Body bgcolor = (hexadecimal code referring to your background colour of choice!)>

annnd for the table

<table width="90%" align="center" bgcolor =(hexadecimal code referring to your background colour of choice!)>
<tr><td align="left" valign="top">
 
	 PAGE CONTENT HERE
 
</td></tr>
</table></body>
</html>

hexidecimal values can be found at http://www.december.com/html/spec/color.html or http://www.web-source.net/216_color_chart.htm , give us the link to your site so I can check it out :D

Happy coding!

Slade

Member Avatar for Slade

replace (hexadecimal code referring to your background colour of choice!)

with a hexidecimal value, such as

<body bgcolor = #FFFFFF>

will produce a white background

Member Avatar for rixius

Just for cuddlers89's information: You don't necessarily need a hexidecimal code for color, you can also use the color name for most basic colors like white red blue black green yellow orange; etc. :)

Member Avatar for Slade

lol, for my information as well, I didn't know that

Member Avatar for liliafan

You can also use style sheets:

<html>
<head>
<style>
body {
   background: colour name or hex value;
}

for tables:

table {
   background: colour name;
}
</style>
</head>

You can also link to external style sheets.

Member Avatar for tarwara

lol, for my information as well, I didn't know that

Hey This thread is old but Here is something new for new HTML comers learn . I hope you will enjoy learning HTML in easy way.

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.