CSS background url displays with live preview of Bracket but doesn't work when open directly by Chrome or Safari

Question

My code works and display fine on live preview of Bracket but doesn't show when open directly with Chrome or Safari.

HTML 
<div class="jumbotron">
    <p>we develop <span>brands</span></p>
    <a href="">projects</a>
</div>

CSS 

.jumbotron {
    display: block;
    width: 100%;
    height: 665px; 
    background: url("/img/Creative/bg-final.jpg") center no-repeat; 
    background-size: cover;
    padding: 0;
    margin: 0; 
}

I simply want my background image shown when open with Safari or Chrome.

Thank you

Answer 1

Brackets live preview creates a local server that's resolving "/img/Creative..." to the root of your project folder. When you open your HTML file in a browser, it's looking for "/img/Creative" at the root of your harddrive instead.

If you need the page to be openable in a browser without a server, you need to use a relative path. So if your CSS file is in "stylesheets/style.css", for example, you'd use "../img/Creative" to reference your image.

"../" takes you up a level in your folder structure.

Answer 2

You are using the wrong code. Try this - background-image: url("paper.gif"); I know you are using the shorthand code but try this. Also always put the image in the same folder so you don't have to write the whole long address again & again.