ramiro

# 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

apostrophe

# 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.

ramiro

# 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

superprakash

# 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

ramiro

# 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

apostrophe

# 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.

ramiro

# 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

ramiro

# 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.