Centering Background

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

Post 3+ Months Ago

Hello,
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:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table height="100%" width="100%">
<td valign="center" align="center">
<table height="400" width="600">
<td valign="center" align="center">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nuevex</title>
<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;
}

-->
</style></head>
<body>
<table width="760" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="template.png" alt="Nuevex" width="760" height="585" longdesc="Welcome to Nuevex" /></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</td>
</table>
</td>
</table>
</html>


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

~Jack
  • 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 ]
margin:0;
padding:0;
  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: http://www.w3schools.com/CSS/css_margin.asp
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 34 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-2014. Ozzu® is a registered trademark of Unmelted, LLC.