Search found 1 match for AB0000

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!!