SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow How to absolute..

    Hi;

    Can someone post me the CSS reference to absolute an image in a table data only?

    Also to place the image so that any text etc will appear over the top if necessary.

    Thanks for any help!
    Rich

  2. #2
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Mesa, AZ
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try;

    table_class {

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-image: url(http://www.url.com/images/banner.gif);

    you can also adjust the position as well, but that will center the image in a cell or table background

  3. #3
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I now have..

    Code:
    td.stats_content {
    	background-image:url("../../Templates/Stats/statsback.gif");
    	background-attachment: fixed;
    	background-repeat: no-repeat;
    	border-style: solid;
    	border-color: #9E4686;
    	border-width: 1px;
    	height: 100px;
    	padding: 5px 5px 10px 10px;
    	height: 100px;
    	color: #000000 }
    and added

    Code:
    <td class="stats_content" valign="top">
    But this has failed?

  4. #4
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok the background now appears.. But is it possible to center the image vertically and to the right?

    Or set the image vertically and horizontally by percentage.

    Thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    To position a background image you can use keywords as follows:
    Code:
    td.stats_content {
    background-image:url(image.gif);
    background-repeat: no-repeat;
    background-position: center center;
    etc......
    The position is horizontal vertical (center center). The horizontal keywords are left,center and right. The vertical keywords are top,center and bottom.

    (e.g.background-position: right bottom; ).

    You can also use % or px.
    (e.g. background-position: 50% 50%; ) which is the same as center center.

    Note, you have used background attachment fixed which IE doesn't understand unless used on the body tag. IE treats it the same as scroll which is what I think you want, however mozilla and opera interpret it correctly and no image will display in your example.

    Fixed means fixed from the viewport (and not the element) and the image will only show if the element happens to be (or is placed) in the same position that the bg image has been placed. It is virtually the same as placing the image fixedin the body tag except by placing it in an element the image will only show when that element is in the same places or passes over the same place. The image will remain in the same place on the viewport at all times and will be invisible if the element associated with it isn't in the same place. (I hope that makes sense).

    So, what I am saying (long windedly) is take out the background-attachment:fixed statement and all will be well.

    Hope that helps.

    Paul

  6. #6
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Mesa, AZ
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i'm sorry, i forgot to remove that from the code, i wasn't thinking!

  7. #7
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thankyou both!

    Rich


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •