SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brisbane Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS background image position - Firefox

    Div background images will not show in Firefox and Netscape, but show ok in IE.
    I thought at first that in Firefox the images were not showing at all, then I find that they are placing themselves relative to the body and not the div in which I'm trying to place them, I've been at it for days, no joy, if there is no answer to this then my design ideas well I might as well forget them. I've tried the shorthand method, but resorted back to the long way to try to jiggle it. Here's the CSS -

    #main-content {
    position: absolute;
    height: 250px;
    left: 22%;
    top: 75px;
    width: 70%;
    background-color: #ffffff;
    background-image: url(image.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 1px #000000 solid;
    padding: 5px;
    overflow: auto;
    z-index: 4;
    }

    Now if I change the "top: 75px" to "top: 0px" bingo I can see part of my image pressed up against the top of the page and I know the right edge of the image is up against the right edge of the page. This is highly frustrating, is there a fix for this??? Or shall I book my ticket for the funny farm? 'Cos this is driving me nuts!
    Chriss

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE6 only interprets background fixed when applied to the body element. On all other elements it's use deviates from the specs.

    The specs say that the fixed background image is always relative to the viewport regardless of what element it is placed in. The image will therefore only show if that element happens to be placed in the same place as the image.

    You will need to offer ie and mozilla different code to achieve the effect you want.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #main-content {
    position: absolute;
    height: 250px;
    left: 22%;
    top: 75px;
    width: 70%;
    background:#fff url(image.jpg) no-repeat right top;
    border: 1px #000000 solid;
    padding: 5px;
    overflow: auto;
    z-index: 4;
    }
    * html #main-content {background-attachment: fixed;}
    </style>
    </head>
    <body>
    <div id="main-content"> 
    <p>Hello</p>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And for a detailed explanation of this, together with a nice demonstration of some cool stuff you can do when the browser does what it's supposed to, see Eric Meyer's Complex Spiral Demo

  4. #4
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brisbane Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much guys. I'm disappointed that I can't do exactly what I wanted but thems the breaks (and a design idea down the plughole). I had a look at Eric Meyer's page in different browsers and now understand the point about fixed background images. Life doesn't get any easier for web designers does it (?) them desktop publishers don't realise how easy they've got it!!!! So, it's back to the drawing board, I guess it was a fanciful idea having the BG images move with the liquid movement when a visitor re-sizes their browser. Thanks again.
    Chriss

  5. #5
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Brisbane Australia
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just had another try with Paul O'B's code posted above, and it works (blow me down wiv a fevver....now if I can just get out of this straight-jacket!!!!!) I tried it with a couple of other divs with BG images, put the lot into an external style sheet, and stone me that worked too! Right now I don't understand WHY it works, so I'll have to get to the bottom of this. Thanks Paul.


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
  •