CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 8th, 2004, 08:11 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
sleeping guru
Dev Shed Regular (2000 - 2499 posts)
 
Join Date: Feb 2003
Location: under the stars
Posts: 2,444 RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)  Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 6 Days 6 h 18 m 28 sec
Reputation Power: 171
Send a message via MSN to RadioactiveFrog
how to position background image??

hey, i have this code below at the top of my page...the image that is there a a background image i would like to more to the right a bit so that some of the orange background is shown on the left!! can anyone advise how i do this please?? thanks

Code:
#TitleBar {
	margin:0px 0px 10px 0px;
	padding:28px 0px 5px 10px;
	padding-left:10px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color: #ffffff;
	border-bottom: 1px #ff9900 solid;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#ff9900;
	background-image:url(../images/webmedia72.gif);
	background-position: left;
	background-repeat: no-repeat;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#TitleBar {height:14px;}



thanks
RF

Reply With Quote
  #2  
Old June 8th, 2004, 10:42 AM
1beb's Avatar
1beb 1beb is offline
This tagline is not long enoug
Dev Shed Novice (500 - 999 posts)
 
Join Date: Aug 2003
Location: Toronto, ON Canada! I AM CANADIAN
Posts: 861 1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level)1beb User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 2 h 32 m 12 sec
Reputation Power: 10
Send a message via ICQ to 1beb Send a message via AIM to 1beb Send a message via MSN to 1beb Send a message via Yahoo to 1beb
try

Code:
background-position: left;


in the #Titlebar section, if that isn't suitable you could read over this document from w3c...

http://www.w3.org/TR/REC-CSS2/color...ground-position

That explains the use of the background-position property.

Reply With Quote
  #3  
Old June 8th, 2004, 11:04 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
sleeping guru
Dev Shed Regular (2000 - 2499 posts)
 
Join Date: Feb 2003
Location: under the stars
Posts: 2,444 RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)  Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 6 Days 6 h 18 m 28 sec
Reputation Power: 171
Send a message via MSN to RadioactiveFrog
thanks for that i have managed to do background-position: 2% 2%; and that seems to work !! but i can't make it go down a bit ... which is strange, i thought it would be using the same settings.. and ideas??

cheers

RF

Reply With Quote
  #4  
Old June 8th, 2004, 11:44 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 4,674 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687
Code:
background-position: [percentage | length] {1,2} |
   [top | center | bottom] || [left | center | right]
If only one percentage value is given, the vertical percentage defaults to 50%. Given your example, a point 2% of the image width from the left edge of the image will be placed 2% of the parent block element's width from the left edge of that element. The same method applies to the vertical. If an image is nearly the same height as the block element, very little movement is possible using percentages. Try fixed metric units for the vertical offset.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Reply With Quote
  #5  
Old June 9th, 2004, 04:54 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
sleeping guru
Dev Shed Regular (2000 - 2499 posts)
 
Join Date: Feb 2003
Location: under the stars
Posts: 2,444 RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)  Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 6 Days 6 h 18 m 28 sec
Reputation Power: 171
Send a message via MSN to RadioactiveFrog
thanks for that i put in 2px and it moved nicely, well kinda!! it looks great in IE (which is a first ) but in firefox it now looks as if it is sitting on the bottom of the orange bar that goes along the top so i guess the orange bar is bigger in IE for some reason...arrrrr any ideas?

Cheers

RF

Reply With Quote
  #6  
Old June 9th, 2004, 05:10 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
sleeping guru
Dev Shed Regular (2000 - 2499 posts)
 
Join Date: Feb 2003
Location: under the stars
Posts: 2,444 RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)  Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 6 Days 6 h 18 m 28 sec
Reputation Power: 171
Send a message via MSN to RadioactiveFrog
not to worry, i have managed to fix it by changing the height and it seems to have stayed good in IE, wierd!! but still....one final question which may require a new post but i will ask here anyway...is there a way i can make it so if i click on that image it takes me to the home page?? i can do it in normal html but am new to CSS and it is not something i have ever had to do or read about before and i can't seem to find anything useful on the web!

thanks in advanced

RF

Reply With Quote
  #7  
Old June 9th, 2004, 07:52 AM
Dusk's Avatar
Dusk Dusk is offline
Twilight Thinking
Dev Shed Novice (500 - 999 posts)
 
Join Date: Feb 2003
Location: Oxford UK
Posts: 656 Dusk User rank is Sergeant Major (2000 - 5000 Reputation Level)Dusk User rank is Sergeant Major (2000 - 5000 Reputation Level)Dusk User rank is Sergeant Major (2000 - 5000 Reputation Level)Dusk User rank is Sergeant Major (2000 - 5000 Reputation Level)Dusk User rank is Sergeant Major (2000 - 5000 Reputation Level)Dusk User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Week 6 Days 21 m 15 sec
Reputation Power: 32
HI, you cant make a bg image into a link. You could place a div with a bg image, and use js 'onlclick' to make the entire div act like a link...

any good?
__________________
Cheers,
Dusk

My portfolio

Reply With Quote
  #8  
Old June 9th, 2004, 08:16 AM
RadioactiveFrog's Avatar
RadioactiveFrog RadioactiveFrog is offline
sleeping guru
Dev Shed Regular (2000 - 2499 posts)
 
Join Date: Feb 2003
Location: under the stars
Posts: 2,444 RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)RadioactiveFrog User rank is First Lieutenant (10000 - 20000 Reputation Level)  Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1Folding Points: 160486 Folding Title: Super Ultimate Folder - Level 1
Time spent in forums: 6 Days 6 h 18 m 28 sec
Reputation Power: 171
Send a message via MSN to RadioactiveFrog
Quote:
Originally Posted by Dusk
HI, you cant make a bg image into a link. You could place a div with a bg image, and use js 'onlclick' to make the entire div act like a link...

any good?



hmmmmm, would rather not...thats a bummer...ok well i will have to forget that idea then!! thanks for replying!!

RF

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignCSS Help > how to position background image??


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway
Stay green...Green IT