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
- You could try adding a div
4 answers
points
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;
text-align:left;
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..!
points
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...
point
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).
- this is a great answer, I'd have missed that myself.
points
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.
