CODEWITHSUNDEEP
css
Angel M.
Angel M.

Reputation: 2742

css background image different in FF and Chrome

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 1920x860. 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.

Upvotes: 0

Views: 91

Answers (1)

tobiv
tobiv

Reputation: 842

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

Upvotes: 1

Related Questions