TinyPortal

Development => Support => Topic started by: jjnova on January 25, 2008, 06:31:52 AM

Title: CSS Help : Centering Backdrop
Post by: jjnova on January 25, 2008, 06:31:52 AM
I apologize if this has been asked before, I couldn't find it when performing a search.

What I would like to do, is have two images as a backdrop. One that has a "beta release" ribbon I can align all the way to the left, as well as a typical banner that is centered. For instance, at http://gamecootie.com , I would like to have the "beta release" portion to the left (like it is right now), and the "Video Game Jerks" banner centered. Below is what my style.css looks like,


#backdrop
{
   height: 98px;
   background: url(images/backdrop.jpg) no-repeat white;
   margin-left:auto;
   margin-right:auto;
   border-top: solid 1px #808080;
}


I would of expected that to center the image, but alas, it does not. Any help whatsoever would be appreciative, even if I can only put a single image there and have it centered.
Title: Re: CSS Help : Centering Backdrop
Post by: Zetan on January 25, 2008, 06:55:52 AM
Try:    background-position: center;
Title: Re: CSS Help : Centering Backdrop
Post by: jjnova on January 25, 2008, 07:16:26 AM
That worked perfectly. Thank you very much.
Title: Re: CSS Help : Centering Backdrop
Post by: G6Cad on January 25, 2008, 07:17:39 AM
background: url(images/backdrop.jpg) no-repeat white;

Should have #white; and not just white;
Title: Re: CSS Help : Centering Backdrop
Post by: IchBin on January 25, 2008, 07:05:43 PM
Actually the # sign is for the hex numbers in colors. So using "white" and not "#white" is the way its supposed to be.