Need my header image to fit all screen sizes

I use Chrome and my header fits perfectly with my screen size. In looking at other computers, tablets etc.. the header does not fit.   
This is the logo https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original

This is what my screen looks like using Chrome.
https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/Image2_zpsy5kdcznq.png~original

This is what it looks like using Chrome & Firefox on both a desktop and an Android Tablet.
https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/unnamed_zpsmaqu9xk4.jpg~original

I just want to know how to get it to fit for everyone.

The CSS I'm using is:

.headerbar {
  min-height:320px;
  background-color: transparent;
  background-image: url('https://2img.net/h/i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original');
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
 
    border: 3px solid #AB0000;
}


Thanks for your help!!

Hi @SensGrl4Life,

I see you're using background-size, so it depends on if the browser supports this CSS property. For better support, you can try using the vendor prefixes for this property.

CSS :

Code:

.headerbar {
  min-height:320px;
  background-color: transparent;
  background-image: url('http://i636.photobucket.com/albums/uu82/JustJoJo/bkgrnd_zpsdz66ho54.png~original');
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  border: 3px solid #AB0000;
}

If that doesn't work, I'd recommend placing the image as a logo via pics management, and then adjusting it's width with CSS. Example :

Code:

.headerbar img { width:100% }

First option adjusts it a little...but its still not 100%

You can adjust it a bit by changing cover to 100% or 100% 100%. The latter fits the image to the dimensions of the HTML element, so there's the possibility of the image appearing... distorted, on some displays.

Will try that when I get home...thanks

The width seems to be ok now.. but the height is off ...

Personally, I would recommend that the image is placed in Display > Pics management > Advanced > Logo

This way you'll have an easier time adjusting the image, so that the height can be automatically calculated. Background images are good, but they take up no space, so it makes it impossible to calculate the dimensions on other screens, unless you utilize numerous media queries.