I have a background image set to repeat on the body of my page. When I resize the browser window the background images moves in Safari 3. However, it doesn't move in Firefox, Safari 4 or Google Chrome.

body {
    background: #151111 url(a/i/boxes_top.jpg) repeat-x 50% bottom;
    padding-bottom: 74px;

Is there a way to make Safari 3 to behave like Firefox or Safari 4?

  • test zemodo about 8 years ago
  • You could try adding a div zemodo about 8 years ago

4 answers

This was chosen as the best answer

You could try adding a div lets call it "container". This wraps your content and has the background image applied to it rather than the body.

Set the css of this container div to

margin: 0 auto;
width: width of your image;
background: #151111 url(a/i/boxes_top.jpg) repeat-x left bottom;
padding-bottom: 74px;

Finally set your body to text align center and you should see the desired results.

Note this is off the top of my head so it may need testing..!

Answered about 8 years ago by Paul Cripps

my guess is : when you repeat-x a background, dont's care about the relative x-positionning of the background... it's roulette. to go with a pixel-based solution may sound good but since you don't know the width of the window...

Answered about 8 years ago by Multiple-media.com
joneff 28

Have you tried using a background ("open_box.jpg" and "text_bottom.jpg") with even number of pixels?

My guess is that horizontaly centered backgrounds with odd and even widths have different actual horizontal position every second pixel (which is the case).

Answered about 8 years ago by joneff
  • this is a great answer, I'd have missed that myself. orta about 8 years ago
Brian 10

While I cannot test in Safari 3 at the moment, I'll take a stab in the dark and recommend you try giving the background a pixel-based horizontal coordinate.

Answered about 8 years ago by Brian