Question

I have very strange situation and I really can’t see why … and how to overcome that.
So I have to place the backgroung image on web site of size 1920×860.
The image ends differently – like: if it is not extended over the whole window, the corners of the image looks strange.

When I tested this in FF, it does not look ok. I tested this on 22” monitor (thus resolution 1680x ..).
when I test this in Chrome, the image extends good, the corners of the image are not seen.

BUT: I have two monitors, the second is 23”, thus the resolution is not much different of the first one and if I test this page on Crome, is ok, on FF also.

Then I used firebug tool and try to get the innerWidth of the window.
The 22” monitor has innerWidth 2124px, the 23” monitor has 1776px.

I would really appreciate if someone can tell me – why this is happening? If someone could have an idea how to place this image to let it extend well on every monitor … would be even better.

The point is – that I have to extend image from corner to corner and while testing on my monitors, I cannot be sure that other users will see this as I can see 🙁

Thanks.

I’ll make the comments here … as all of you are so kind I just tried many different solutions. the point is that the image is not cover for whole background – should be seen and at the bottom should just have some color …
Now I’m using simple background: url() no-repeat top center ..

if I use -cover- the image is extended – but I needed to extended only vertically. I used JS as well, but is not working ok, as the footer is a part of that bg-image … and become all wired.

Maybe, I’ll just use @media .. to set bigger image for bigger screens (and of course will use bigger image) but also this will work only for a bit bigger screens, if not the design will crash, I think.

Answer 1

Let me google that for you (first result for ‘css window background’):

http://css-tricks.com/perfect-full-page-background-image/

In a nutshell:

html { 
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

See also: http://caniuse.com/#search=background-size