Question

I’m working on a site at http://simplyclassicremodeling.com. The text and background images are placed as desired for Chrome; IE has a separate issue I asked about elsewhere, but with Firefox the background images are not in the intended place (the text is where it’s meant to be, but the background images for the body and the the header are to the left and above their intended position respectively).

How can I tell Firefox to put the backgrounds in the same place as Chrome?

Answer 1

Firefox doesn’t seem to be interpreting background-position-x and background-position-y correctly, no idea whether that is correct or not per the specification. Just use background-position as one would normally expect, like so:

body {
    background-image: url("/img/side_border.png");
    background-repeat: repeat-y;
    background-position: 240px 0;
    font-family: 'Macondo Swash Caps', cursive;
    font-size: larger;
    overflow-x: hidden;
}

header {
    background-image: url("/img/top_border.png");
    background-position: 0 160px;
    background-repeat: repeat-x;
    height: 200px;
    padding-left: 310px;
    width: 100%;
}

This worked for 8.0.1 when I edited in the changes through Firebug.