Web Analytics Made Easy -
StatCounter CSS Background problem with IE and Firefox - CodingForum

Announcement

Collapse
No announcement yet.

CSS Background problem with IE and Firefox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Background problem with IE and Firefox

    Hi all,

    Im hoping someone here has ran into this problem and can help me fix it. I created a layout for my page in Photoshop and then sliced it up. I put the whole page back together using <div> tags instead of tables. While most of the <div>'s simply display an image. There are 3 that im using to display Text in. So i wanted to set the image as a background instead.

    Here's the code (im still new to CSS so forgive me for not know the shorthand way):

    .piece5 {
    width: 450px;
    height: 450px;
    position: absolute;
    top: 100px;
    left: 175px;
    overflow: auto;
    background: url("image5.jpg");
    background-attachment: fixed;
    }


    Now the above code works fine in IE 6. The text scrolls in the box and the background stays in place perfect. Firefox however takes the background image and tiles across the whole page behind everything, almost like i said set this image as the background image for the whole page. Its ignoring the <div> constraint.

    If i take the background-attachment: fixed; off then the picture works perfectly in Firefox, but in IE 6 the picture scrolls up with the text.

    I want this to look good in both browsers. The background image is part of the overal image of the page and i can't simply use a default back ground color. I need the image to stay in place correctly in both browsers.

    Any ideas please?

  • #2
    You should supply a link to your page or add the code to your post in between code tags, just in case there is something elsewhere in your code that could be causing issues.

    Try using:
    Code:
    background: url('image5.jpg') no-repeat fixed;
    which should keep the background from repeating or scrolling with the page.

    Comment


    • #3
      Originally posted by kaitco View Post
      You should supply a link to your page or add the code to your post in between code tags, just in case there is something elsewhere in your code that could be causing issues.

      Try using:
      Code:
      background: url('image5.jpg') no-repeat fixed;
      which should keep the background from repeating or scrolling with the page.
      Better to use no quotes around CSS urls as at least one browser has issues with single quotes and will ignore the file being referenced.

      e.g.
      Code:
      @import url(styles.css)
      
      /* or */
      
      background: url(image5.jpg) no-repeat fixed;
      Why you should validate your code before asking for help...

      Comment


      • #4
        Code:
        background: url('image5.jpg') no-repeat fixed;

        This still does not work in firefox, it simply puts the image in the far upper left hand corner of the main <div> and does not Tile it. The "fixed" seems to make it ignore the fact that its constrained inside a <div> tag.

        Code:
        .piece5 {
        width: 450px;
        height: 450px;
        position: absolute;
        top: 100px;
        left: 175px;
        overflow: auto;
        background: url("image5.jpg");
        background-attachment: fixed;
        }
        
        <div class="main">   
             <div class="piece5">
             <p> Paragraph of text here</p>
             </div>
        </div>
        Last edited by insanegod; Oct 9, 2006, 02:30 PM.

        Comment


        • #5
          In firefox background-position:fixed; works how the specs say it should. It says no element other than the body can have a fixed background image which is why it does what it does. IE doesn't adhere to the specs therefore its probably the more desired effect that you want. Not much you can do about it other than removing background-position:fixed;
          ||||If you are getting paid to do a job, don't ask for help on it!||||

          Comment

          Working...
          X