I am creating basic HTML code for CMS. One of the options associated with a page in the CMS is “background image” and “width / height of the stretch page to the width / height of the background image”. so with large background images everything becomes visible.
My current screen resolution is 1280 x 1024.
If I do the following:
- Specify a background image with a width of 1400 pixels.
- Indicate "position" as "center of center" (horizontal / vert.)
- Specify "stretch page width to background image width"
then in FF the following happens:
- the page is correctly stretched to 1400 pixels. I get a horizontal scrollbar since my screen is smaller than this. So far so good.
- and now the strange thing is: the background image is not centered relative to 1400px, thus showing the full image, but relative to my viewing window of 1280px, hiding part of the image behind the left edge of the screen and leaving a white bar to the right , rather than showing the entire image.
- There are no additional elements (DIV, wrappers ...) that could manipulate anything. All settings are directly in the body.
Update: IE is doing it right. Google Chrome has the same problems.
It is as if Firefox first displays the background image at a speed of 100%, centers it, and then notices that the body needs to be stretched to 1400 pixels.
Is this normal Firefox behavior? Any ideas what I can do?
, , , - .
CSS:
body
{
background-image: url(http://www.domain.com....image.jpg);
background-repeat: no-repeat;
background-position: center center;
min-width: 1400px;
height: 100%;
}