Webpage displaying correctly in chrome, not in firefox - html

Question

As shown in the images, the background image of my webpage fits on chrome, but for some reason, the image does not scale correctly in firefox even though the window sizes are the same. Worse yet, when I shrink the window width, it does not scale well at all. How am I supposed to know the window size of the browser someone is using?
UPDATE here are the images. First is chrome, second is firefox
https://www.flickr.com/photos/125343138#N07/24491082235/in/dateposted-public/
https://www.flickr.com/photos/125343138#N07/24464890356/in/dateposted-public/
Here is the stylesheet
.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: fill;
overflow: hidden;
background-color: #333;
}
.nav li {
display: inline;
padding: 20px 10px;
}
.nav li a {
color: whitesmoke;
padding: 14px 190px;
font-family: 'futura';
font-size: 16px;
position: relative;
top: 5px;
}
.jmb {
background-image: url('https://farm2.staticflickr.com /1600/24149223706_da584c8c45_o.jpg');
height: 100%;
width: 100%;
position:absolute;
background-repeat: no-repeat;
background-size:contain;
background-position: 00px 37px;
}
.jmb h5 {
font-family: 'Yellowtailregular';
font-size: 105px;
color: black;
margin-top: 170px;
margin-left: 190px;
-webkit-animation-delay: 1s;
-webkit-animation-duration: 4s;
}
.jmb div p
{
font-size: 27px;
font-family: 'futura';
margin-left: 110px;
margin-top: -24px;
word-wrap: break-word;
width: 27%;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 4s;
}

Answer 1

Technically you'll only really know what browser size your user is using based on your metrics and what you know about your demographic. I'd start with something small and scale up higher as you go till you reach that large desktop size.
AMACB is right about the webkit support so some of your code might require a moz prefix to work correctly. you can find documentation on the support for that here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart
As far as covering your entire given area, I don't see a live link but my first suggestion would be to try with this:
background-size: cover
That should take the image and map it to the size of the object its in although you may not get the aspect ratio right. Thats when you might consider using media queries and/either different images or different positioning to alter how its displayed. Be sure to check your markup as well to make sure that there isn't an object that is on the border of your page as well that would prevent the image from reaching the end.