I have just created an HTML5 page with a background image in the top

Question

0

Asked: June 6, 20262026-06-06T10:58:11+00:00 2026-06-06T10:58:11+00:00

I have just created an HTML5 page with a background image in the top

0

I have just created an HTML5 page with a background image in the top center.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>Example</p>
    </body>
</html>

With the following CSS:

body 
{
    background-image: url('images/bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 36px 0 0 0;
}

But I have spotted a problem in Firefox 12.

No matter how much I shrink the browser window, the HTML element never falls below 376px. This causes the background position to no longer appear in the center, but instead it looks like it is right-aligned (and then crops the right-hand portion of the image).

In Chrome, Opera and Internet Explorer it works as expected, but in Firefox I get this strange behaviour. I have added a screenshot of all four browsers showing this page.

UPDATE

This seems to be related to the size of the toolbar in the browser as the width it stops at is identical to the width of the browser toolbar. A colleague has just tried it and his toolbar is 427px and it stopped at this value. I presume this is a Firefox bug.

Firefox HTML element larger than browser window