Center Background Options

[lpdrummer]

OK I am trying to center my background so it lines up with my image. I was told to do this, but don't know where to edit these things!

It works a helluva lot better if you do this.
----
Set alignment to Left.
Put your background as Centered. (center center if you're using CSS)
Set your image div to <div align="center">
Also, if you edited the width of the original image, they won't line up anyways.

if anyone could help, it would be great!

xanga's here- http://www.xanga.com/lpdrummer

[talcumpowder]

...... Since you don't seem to get intermediate terms.... Let's go with n00b ones.
----
1. Sign into Xanga and go to your Look and Feel.
2. Change the alignment of your page to LEFT. It's the part of the page that say Page Alignment:. Now is also a good time to make sure your page is on 100% page width.
3. Take out your exsisting image map code and put this one in.

<!-- begin code provided by createblog.com --><br /><div style="position: static; margin-left: -0; margin-top: -97;"><br /><img src="http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatSkinB.gif" width="800" height="694" border="0" alt="" usemap="#beatmap"> <br /><MAP NAME='beatmap'><br /><AREA SHAPE='rect' COORDS='216,591,260,607' HREF='http://www.xanga.com/lpdrummer'><br /><AREA SHAPE='rect' COORDS='279,592,361,607' HREF='http://www.xanga.com/SubscribeTo.aspx?user=lpdrummer'><br /><AREA SHAPE='rect' COORDS='381,591,420,606' HREF='http://www.xanga.com/signin.aspx'><br /><AREA SHAPE='rect' COORDS='437,593,473,607' HREF='http://www.xanga.com/claf'><br /><AREA SHAPE='rect' COORDS='488,591,525,608' HREF='http://help.xanga.com'><br /><AREA SHAPE='rect' COORDS='543,592,591,608' HREF='http://www.xanga.com/logout.aspx'><br /></MAP></div><br /><!-- end code provided by createblog.com -->

4. Put your background as Centered. It's center center if you're using CSS to position the background.
5. If that doesn't work, then check to see if the width of your image is larger than the width of your background. If so, you need to make a new background.

[lpdrummer]

...... Since you don't seem to get intermediate terms.... Let's go with n00b ones.

Yes! Until I get this, that would probably be best...

4. Put your background as Centered. It's center center if you're using CSS to position the background.
5. If that doesn't work, then check to see if the width of your image is larger than the width of your background. If so, you need to make a new background.

OK This is where I got thrown off in the first place- Where is the part where I put "centered"?

And the width of my background is the same width as my header. Both 800 Pixels wide.

[talcumpowder]

..... Are you using CSS or the background box?
Because there's a nifty little drop-down under the background box and one of the options is Centered.

[lpdrummer]

..... Are you using CSS or the background box?
Because there's a nifty little drop-down under the background box and one of the options is Centered.

I'd rather use the header so that when I release this skin, I have the code already in the header HTML instead of having to tell people to do it.

[talcumpowder]

..... Like this.

CODE

body{background-image:url('URL HERE'); background-repeat: repeat-y; background-position: center center;}

[lpdrummer]

..... Like this.

CODE

body{background-image:url('URL HERE'); background-repeat: repeat-y; background-position: center center;}

Should I put that in place of this code you gave me?

<div style="position: static; margin-left: -0; margin-top: -97;">
<img src="http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatSkinB.gif" width="800" height="694" border="0" alt="" usemap="#beatmap">

[talcumpowder]

..... Nevermind. Let's just do it like this.

CODE

<stye type='text/css'>body{background-image:url('URL HERE'); background-repeat: repeat-y; background-position: center center;}</style>

Put that anywhere in your Custom header.

CODE

<div align="center">
<img src="http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatSkinB.gif" width="800" height="694" border="0" alt="" usemap="#beatmap">

That's what your image should look like.

[lpdrummer]

..... Nevermind. Let's just do it like this.

CODE

<stye type='text/css'>body{background-image:url('URL HERE'); background-repeat: repeat-y; background-position: center center;}</style>

Put that anywhere in your Custom header.

CODE

<div align="center">
<img src="http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatSkinB.gif" width="800" height="694" border="0" alt="" usemap="#beatmap">

That's what your image should look like.

1. you are a god among men!
2. Should I take anything out of my code with those in? Like have both these in there-

<!-- begin code provided by createblog.com --><br /><style type='text/css'>body{background-image:url('http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatBGBar.gif'); background-repeat: repeat-y; background-position: center center;}</style><br /><!-- end code provided by createblog.com -->

and

<!-- begin code provided by createblog.com --><br /><style> <br />body { background-color:#2C2829; <br />scrollbar-base-color: 141414;<br />scrollbar-arrow-color: BD9236;<br />scrollbar-face-color: 141414;<br />scrollbar-track-color: 2C2829; <br />[b]background-image:url(http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatBGBar.gif); background-repeat: repeat-y; background-attachment: normal; background-position: center; } [/B]<br />div {scrollbar-base-color: 141414;<br />scrollbar-arrow-color: BD9236;<br />scrollbar-face-color: 141414;<br />scrollbar-track-color: 2C2829;} <br /><!-- end code provided by createblog.com -->

3. My left sidebar text is gone!
4. What do I play around with to get the header to line up with the BG? Theres like a 2 pixel difference (This may be because of repeated code mentioned above)

[talcumpowder]

Use this.

<!-- begin code provided by createblog.com --><br /><style> <br />body { background-color:#2C2829; <br />scrollbar-base-color: 141414;<br />scrollbar-arrow-color: BD9236;<br />scrollbar-face-color: 141414;<br />scrollbar-track-color: 2C2829; <br />background-image:url(http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatBGBar.gif); background-repeat: repeat-y; background-attachment: normal; background-position: center center; }<br />div {scrollbar-base-color: 141414;<br />scrollbar-arrow-color: BD9236;<br />scrollbar-face-color: 141414;<br />scrollbar-track-color: 2C2829;}<br /><!-- end code provided by createblog.com -->

As to why your sidebar text is gone... That's a fault on your own part. None of the codes I've given you do such things. Even a repeated code wouldn't. See if that works. Depending on which code you had first, the broswer would read the CSS diffrently.

[lpdrummer]

Use this.

<!-- begin code provided by createblog.com --><br /><style> <br />body { background-color:#2C2829; <br />scrollbar-base-color: 141414;<br />scrollbar-arrow-color: BD9236;<br />scrollbar-face-color: 141414;<br />scrollbar-track-color: 2C2829; <br />background-image:url(http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatBGBar.gif); background-repeat: repeat-y; background-attachment: normal; background-position: center center; }<br />div {scrollbar-base-color: 141414;<br />scrollbar-arrow-color: BD9236;<br />scrollbar-face-color: 141414;<br />scrollbar-track-color: 2C2829;}<br /><!-- end code provided by createblog.com -->

As to why your sidebar text is gone... That's a fault on your own part. None of the codes I've given you do such things. Even a repeated code wouldn't. See if that works. Depending on which code you had first, the broswer would read the CSS diffrently.

OK I'll have to see what I did thats causing it...

But what did that code do? I put it in, but just wondering. And can I add something in here

<!-- begin code provided by createblog.com --><br /><div align="center"><br /><img src="http://img.photobucket.com/albums/v171/lpdrummer/Xanga/BeatSkinB.gif" width="800" height="694" border="0" alt="" usemap="#beatmap"><br /><!-- end code provided by createblog.com -->

to move the main header right one pixel?