#1
  1. sleeping guru
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2003
    Location
    under the stars
    Posts
    2,444
    Rep Power
    182

    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
  2. #2
  3. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    20
    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/colors...round-position

    That explains the use of the background-position property.
  4. #3
  5. sleeping guru
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2003
    Location
    under the stars
    Posts
    2,444
    Rep Power
    182
    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
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1961
    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.
  8. #5
  9. sleeping guru
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2003
    Location
    under the stars
    Posts
    2,444
    Rep Power
    182
    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
  10. #6
  11. sleeping guru
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2003
    Location
    under the stars
    Posts
    2,444
    Rep Power
    182
    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
  12. #7
  13. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    652
    Rep Power
    43
    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
  14. #8
  15. sleeping guru
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Feb 2003
    Location
    under the stars
    Posts
    2,444
    Rep Power
    182
    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

IMN logo majestic logo threadwatch logo seochat tools logo