CODEWITHSUNDEEP
htmlcssbackground-imagelocal
jan horuk
jan horuk

Reputation: 25

Local background image doesn't show up, but if I replace it with one on the web it does work

Here is my HTML and CSS https://codepen.io/anon/pen/YBmLJR

header{
    background-image: url(slike\header\header-ozadje.png);
    position: fixed;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #E2B654;
}
#top-logo img{
    box-sizing: border-box;
    max-width: 100%; height: auto;
    padding: 5%;
}
nav{
    display: flex;
    justify-content: flex-end;
    flex: none;
    margin-right: 2%;
}
.nav-text{
    margin: 15px;
    flex: none;
}
.nav-text a{
    text-decoration: none;
    font: bold 16px/28px 'Open Sans', sans-serif;
    color: antiquewhite;
}
.nav-text a:hover{
    color: #DFB76B;
}
<header>
        <div id="top-logo">
            <img src="slike\logo\astroplanet-logo.png"> 
        </div>      
        <nav>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
            <div class="nav-text"><a href="#">DOMOV</a></div>
        </nav>
    </header>

The background image linking to my local folder (I copied the relative path in VSC, so it should be correct) in my header doesn't show up, but it does if I replace it with a URL that is on the web.

If you run the code there is also the logo, but that should have the broken link image.

Thank you for your help!

Upvotes: 1

Views: 53

Answers (3)

Muhammad Muzammil
Muhammad Muzammil

Reputation: 26

Before location you have to put slash you should replace your image location with this background-image: url(/slike/header/header-ozadje.png);

Upvotes: 0

hamza benammi
hamza benammi

Reputation: 26

use slash in css url

background-image: url(slike/header/header-ozadje.png);

Upvotes: 0

Srijan
Srijan

Reputation: 257

Try to use relative path like .\slike\header\header-ozadje.png or \slike\header\header-ozadje.png. The problem is with the path of the image.

Your html file should be in parent directory of slike folder.

If you are using windows use "\" if linux use "/". It should work.

Upvotes: 1

Related Questions