CSS Background image is only working in Chrome and no other browser

I’m building a new website and i have been testing my current code in multiple browsers where i have found the background images i placed in the header tag via css work in Chrome but no other browser. I would like the images to work across all browsers.

I have read through a few threads which cover the topic but none of the solutions work.

HTML  <head>     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">     <link rel="stylesheet" type="text/css" href="CSS/styles.css">     <title>Bazaar Ceramics - Home</title> </head>         <header>             <a class="logo" href="/Home.html"><span>logo</span></a>         </header> <!--navigation, body and footer below-->       CSS body, html{     min-height:100%;     min-width:100%; }  header{  background: url(/Images/banner.jpg) no-repeat center 0;  background-size: cover;  margin-bottom: 0px;  position: relative;  height: 296px;  }  header a.logo {  position: absolute;  display: block;  width: 200px;  height: 136px;  background: url(/Images/logo.png) no-repeat 0 0;  background-size: contain;  z-index: 1;  top: 160px;  left: 50px; } header a.logo span { display: none;  }  @media screen and (max-width: 750px)  {     header a.logo {width: 150px; height 100px;}         nav { padding: 0px 0px 0px 10px; } }  The Chrome browser shows the banner and logo correctly, when the browser size changes the images change size to match the browser size or nominated CSS size. i can hover my mouse over the logo and see the arrow change and it is selectable in all browsers.