This is a discussion on "Centerng a background image." within the Web Page Design section. This forum, and the thread "Centerng a background image. are both part of the Design Your Website category.
|
|
|
|
|
![]() |
||
Centerng a background image.
|
||
| Notices |
![]() |
|
|
LinkBack | Thread Tools |
|
#1
|
||||
|
||||
|
Centerng a background image.
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
Last Blog Entry: Annoying people.... (Jan 16th, 2008)
|
|
|
|
#2
|
||||
|
||||
|
Re: Centerng a background image.
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
Last Blog Entry: Random String in Javascript (Apr 21st, 2008)
|
|
#3
|
||||
|
||||
|
Re: Centerng a background image.
Thanks a lot guys.
Last Blog Entry: Annoying people.... (Jan 16th, 2008)
|
|
#4
|
||||
|
||||
|
Re: Centerng a background image.
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;
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. |
|
#5
|
||||
|
||||
|
Re: Centerng a background image.
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
|
|
#6
|
|||
|
|||
|
Re: Centerng a background image.
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. |
|
#7
|
|||
|
|||
|
Re: Centerng a background image.
Quote:
|
![]() |
| Tags |
| centerng, background, image |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| how they do the background image act like that ? | marSoul | Webforumz Cafe | 11 | Nov 10th, 2007 19:18 |
| background image not big enough | mykl | Web Page Design | 7 | Oct 11th, 2007 19:08 |
| background image in a div | BumbleWeasle | Web Page Design | 5 | Oct 9th, 2006 12:37 |
| Background image overlaping footer image at bottom of div | lw_d | Web Page Design | 4 | Mar 21st, 2006 00:27 |
| Need help with my background image!!! | courtjester | Web Page Design | 3 | Sep 30th, 2003 15:25 |