'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.

htmlcssgoogle-chromefirefox


Solution 1:[1]

Look at your css file. You're path is CSS/styles.css which is a relative file path.

For your images, you're using /Images/image.jpg which is an absolute file path.

If you use /Images on a hosting account online, it will go to whatever your root directory is which is what you intend. If you use /Images on your local device... it will go as far back to get to the root as you can go.

So if my computer structure is:

my-computer -desktop --my-project ---index.html ---Images ----image.jpg ---CSS ----styles.css

/Images is going all the way back to the my-computer folder and looking for it there. It wont find it there though.

What you want to do is ../Images to move back one level outside of the css folder and look for the images folder.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rachel

Related Questions