Grow your CSS skills. Land your dream job.

Problem with background image in Safari 3 and IE 7 -

  • # June 23, 2009 at 9:39 pm

    I have a problem, I set a background image to repeat in the body and when I make the browser window taller the background images moves, I was thinking that setting the background position to top solve the problem, until I started to add content on differents pages I realize that the background images moves depending on the content, and when I set to bottom the images stay in place no matter how many content I have, but the problem is the same with Safari 3 and IE 7.

    You can see my example here: http://mirdum.com/experimentos/test/

    works in Firefox 3 +, Safari 4, Camino 1.6.8, Opera and IE8, just make your browser window taller and see that in safari 3 and IE7 the background images moves.

    Thanks and sorry for my english.

    Wes
    # June 23, 2009 at 10:23 pm

    I think we are going to need to see some code before we can help

    # June 23, 2009 at 10:43 pm

    Not seeing the problem in Safari 4. How about setting boxes.jpg as the background for the body instead of html and then creating a 100% wide div for boxes_top.jpg.

    # June 23, 2009 at 11:03 pm
    "apostrophe" wrote:
    Not seeing the problem in Safari 4. How about setting boxes.jpg as the background for the body instead of html and then creating a 100% wide div for boxes_top.jpg.

    The problem is with safari 3 and internet explorer 7, and I follow your advice and still don’t work the boxes keep moving when I make my browser window taller,

    The code that I using is:

    Code:


    Lorem ipsum dolor sit amet…


    the live example is here: http://mirdum.com/experimentos/test/

    I want to make the bg images stay still like in firefox 3 does

    # June 24, 2009 at 2:45 am

    Hi,

    Yes i noticed that problem. please remove that bgcolor or Transpernt

    body{
    background: url(boxes_top.jpg) repeat-x top left;

    }

    now its working i also checked

    # June 24, 2009 at 12:44 pm
    "superprakash" wrote:
    Hi,

    Yes i noticed that problem. please remove that bgcolor or Transpernt

    body{
    background: url(boxes_top.jpg) repeat-x top left;

    }

    now its working i also checked

    The problem is with the boxes.jpg in the html

    Code:
    html{
    background: url(a/i/boxes.jpg) 50% bottom;
    }

    If I set the background position to top the boxes images move depending on the content and if I set to bottom the boxes stays in place, when I make my browser window taller I can see more boxes, that’s what I want but in safari 3 and ie7 the boxes images moves and I don’t know why? that break the illusion that boxes_top.jpg and boxes.jpg are just 1 image.

    I hope that there is a solution for this

    # June 24, 2009 at 1:02 pm

    It’s not necessary to post the code if you give a working link.
    What’s the 50% for?
    I think the problem is coming from the padding on the body (I didn’t notice that this morning ‘cos I was in a hurry), take boxes_top.jpg back into photoshop and make it the height you need it to be, then get rid of that padding.

    # June 24, 2009 at 1:21 pm
    "apostrophe" wrote:
    It’s not necessary to post the code if you give a working link.
    What’s the 50% for?
    I think the problem is coming from the padding on the body (I didn’t notice that this morning ‘cos I was in a hurry), take boxes_top.jpg back into photoshop and make it the height you need it to be, then get rid of that padding.

    the 50% is for make the background move with the centered container if you take a close look the the text_bottom.jpg it have 2 parts of boxes and that looks like the container is transparent and that is working fine.

    I remove the padding and the problem is the same if I set the background posirion to 50% bottom works except in safari 3 and ie7 because the boxes.jpg moves with the window if you change the height of the window and if I set to 50% top , the move problem is gone until I start to add content the boxes move because the height of the html change and it break the
    illusion that boxes_top.jpg and boxes.jpg are 1 big image.

    I hope that there is a solution for safari 3 and IE7

    # June 25, 2009 at 5:37 pm

    Well it looks that there is no solution for this, I don’t want to give up, I just have the problem in safari 3 and ie7 :cry: I guess is a bad interpretation of the background position in these browsers because in safari 4 and ie8 works like I want.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".