Centering Background

  • Jackend
  • Newbie
  • Newbie
  • Jackend
  • Posts: 11

Post 3+ Months Ago

I am using Dreamweaver and the content of my site is centered, but when I add a background it starts all the way to the left, not centered like the webpage content.
I want it to repeat downward, aligned with the rest of the content

Im sure its completley simple and I might figure it out before anyone ever gets to reply but it would be really helpfull =]

Here is the incompleted page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<table height="100%" width="100%">
<td valign="center" align="center">
<table height="400" width="600">
<td valign="center" align="center">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #999999;
text-align: center;
width: 760px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
background-image: url(LowerBar.png);
background-repeat: repeat-y;

<table width="760" border="0" cellspacing="0" cellpadding="0">
<td><img src="template.png" alt="Nuevex" width="760" height="585" longdesc="Welcome to Nuevex" /></td>

Also, unrelated to this, my content is centered but its a few pixels down from the top of the browser.

  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Replace background-image, background-repeat, and background-color with:
CSS Code: [ Select ]
background:#999999 url(LowerBar.png) repeat-y 50% 0;

The "50% 0" part centres the image: the first number, 50%, sets the distance from the left and right site (50% being centred); and the second part, 0, is the distance from the top and bottom (both of which the background should run to, correct?).

As for the few pixels from the top - just add:
CSS Code: [ Select ]
  1. margin:0;
  2. padding:0;

To the the "body" element in your CSS, and that'll fix it.

Take a look at this page over at w3schools:
It explains how to use multiple values for the "margin" property (to set, for example, a separate top, bottom, left, and right margin in a singe property), but the same principal applies to other properties. For example, the "padding" property, or, as above, the "background" property.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.