[Solved] Aligning an Image to the Centre

[Glenbot3000]

A bit of a rudimentary question, but I am a rookie after all. :3

So yeah, how can I align an image I have to the centre of the page (on all resolutions/browsers)?

[Jeager]

Is it a background image? Thrown in a div, how is it positioned? Im going to assume its a bg image, so in your css you can use something like:

body

{

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

And if I recall correction, you can do ‘center center’ for it to be vertically aligned also.

[Glenbot3000]

^ the HTML.

.banner {

position:absolute;

width:9999px;

height:99px;

top:0px;

left:0px;

background-repeat:repeat-x;

background-image:url(/PWR/pwr3.png);

overflow-x:hidden;

}



.logo {



}

That’s my CSS. Not sure what to put in for the logo ID to make it centre, but as you can see, it’s not a background image.

[Glenbot3000]

Oh, and if there’s a better way to have a banner stretch the page, would also be appreciated.

[Jeager]

Okay, get rid of the image in your markup.

.logo {

width: 235px;

height: 71px

background-image:url(/PWR/pwr_embossed.png);

margin:0 auto;

}

Also change the banner width to 100%. Should work

[Glenbot3000]

Should I just add an extra div for the logo class?

[chrisburton]

What is the link to your code?

[Jeager]

Yeah, add a div inside the banner and add the .logo class to it. Or at least, is how I would do it. Someone else may tell you a better way

[Glenbot3000]

http://jsbin.com/esefi3

problem solved, anyway. obviously if there’s more to contribute, feel free. :)

[Jeager]

Glad to see, where did you find that snip of texture? I like it. Also, I would add a margin-top:14px; to the top, will center it on its y also.

[Glenbot3000]

I don’t remember the specific site, but I recoloured it to match the “My Beautiful, Dark, Twisted Fantasy” album cover.

Getting the embossed effect on the text was an absolute nightmare too, but well worth it.

[chrisburton]

@Glenbot3000 I completed the code using CSS3 Gradients and a little simple SEO enhancement. There is fallback so this should work in every browser including IE7+ (I did not test in IE6)

Update: View Source

[Glenbot3000]

Wow, that’s awesome!

Thanks a lot, dude! Highly appreciated.

[Author]

Posts