Centerng a background image.

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.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Aug 10th, 2006, 08:01
minute44's Avatar
Most Reputable Member

SuperMember
Join Date: Apr 2006
Location: Nottingham UK
Age: 25
Posts: 1,351
Blog Entries: 3
Thanks: 0
Thanked 1 Time in 1 Post
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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Aug 10th, 2006, 08:24
spinal007's Avatar
Moderator
Join Date: Mar 2004
Location: Good Ol'London
Age: 23
Posts: 1,669
Blog Entries: 1
Thanks: 1
Thanked 4 Times in 4 Posts
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)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Aug 10th, 2006, 13:42
minute44's Avatar
Most Reputable Member

SuperMember
Join Date: Apr 2006
Location: Nottingham UK
Age: 25
Posts: 1,351
Blog Entries: 3
Thanks: 0
Thanked 1 Time in 1 Post
Re: Centerng a background image.

Thanks a lot guys.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Aug 14th, 2006, 23:25
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
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;
  • 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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Jan 26th, 2007, 19:45
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Jan 30th, 2007, 15:57
Reputable Member
Join Date: Dec 2005
Location: Texas
Age: 19
Posts: 328
Thanks: 0
Thanked 0 Times in 0 Posts
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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Jan 30th, 2007, 16:32
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Centerng a background image.

Quote:
Originally Posted by daygon View Post
yeah its all about the
background: no-repeat #color position position;
Actually it's

Quote:
Originally Posted by Ryan Fait View Post
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;
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
centerng, background, image

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT. The time now is 00:56.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved