Results 1 to 8 of 8

Thread: <div> fixed bgimage

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default <div> fixed bgimage

    Code:
    <div style="width:521px;height:252px;overflow:auto;">
    I use the above code to avoid using <iframes>. But how can I make the background-img fixed, instead of scrolling with the content ?

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    K. Well... you already asked this, but, yeah, this is a better place for it.
    Just search this forum... there have been a lot of threads about it. (maybe css or graphics, too, perhaps)
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    background-attachment: fixed;
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    So I placed this, but it won't stay fixed:
    Code:
    <div style="width:521px;height:252px;overflow:auto;background-attachment: fixed;">
    
    <table width="100%" height="100%" background="bgpalet.gif" border="0" cellpadding="0" cellspacing="0">
    <tr><td align="center" valign="middle">  
    ...(content)

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Why are you using CSS in one element, and obsolete presentational HTML in another?
    Code:
    <div style="width:521px;height:252px;overflow:auto;">
    
    <table style="width: 100%; height: 100%; background: silver url(bgpalet.gif) fixed; border: 0 none;" cellpadding="0" cellspacing="0">
    <tr><td style="text-align: center; vertical-align: middle;">
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    Twey, the problem has not been fixed with the code you proposed.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The fixed value for the background attachment often works counter-intuitively and the way it is supported varies among browsers but, those that do support it (all modern browsers) do so in a similar, if not identical fashion. The most reliable element to use it with is the body. In your case it should be applied to the element that scrolls:

    Code:
    <div style="width:521px;height:252px;overflow:auto;background: silver url(bgpalet.gif) fixed;">
    
    <table style="width: 100%; height: 100%; border: 0 none;" cellpadding="0" cellspacing="0">
    <tr><td style="text-align: center; vertical-align: middle;">
    Make sure that no other css rules in a stylesheet or elsewhere give any background to the table, its body, rows, cells and any of its cells' contained elements. If they do, those backgrounds will obscure the division's (or any underlying element's) background.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    927
    Thanks
    121
    Thanked 2 Times in 2 Posts

    Default

    Works perfectly.
    Thank you so much !

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
  •