Centerng a background image.

[minute44]

Hey guys... Just thought I'd ask the question to save me barking up the wrong tree if it's impossible...

I want to get a navigation similar to this...

http://www.anthonyphillips.org.uk/

As in, I want little triangles to appear like arrows on hover. I know how I'm going to do it but I'm only going to proceed if my ideas are actually possible with CSS.

Can you centre a background image? The reason I ask is because I want my navigation to be resizable when the user increases text size... at the same time I want the little triangle to remain dead centre in the text area...

If it's possible, let me know.

Cheers in advance. Dan

[spinal007]

background-position: bottom center;
You can also use %s and pixels. But according to standards you shouldn't mix (ie: 'top 50px' is no good)

http://www.w3schools.com/css/pr_background-position.asp

[minute44]

Thanks a lot guys.

[Ryan Fait]

Here's my two cents about the background shorthand element.

While it's used improperly almost everywhere, this is the proper order in which things should be placed in the element:

background: #fff url("image.jpg") no-repeat left top;

NOT

background: #fff url(image.jpg) top left no-repeat;

• The horizontal positoning comes before the vertical positioning. If you've ever used 10px 50px instead of top left, you'll realize that the 10px puts it from the left by that much, not the top.
• The repeating declaration should come after the url, not the position.
• Always use quotes when defining an image url.

As it's shorthand, I never use #fff url("image.jpg") no-repeat left top; anyway because it's more to type than #fff url("image.jpg") no-repeat 0 0;. They do the exact same thing, but the latter saves time and bytes.

The 50% is the same as the center position. And 100% is the same is the bottom or right position.

[Ryan Fait]

I ran across this old post of mine and thought I would correct myself. Quotes are not required in the url() part of a value. Using a single or double quote is optional

[daygon]

yeah its all about the
background: no-repeat #color position position;

that will help you.
also..
trial and error will help you learn everything alot better. you get to see what does what.

[karinne]

Originally Posted by daygon

yeah its all about the
background: no-repeat #color position position;

Actually it's

Originally Posted by Ryan Fait

While it's used improperly almost everywhere, this is the proper order in which things should be placed in the element:

background: #fff url(image.jpg) no-repeat left top;