I have some issues with css image background, will only display if i use the live server extension from VS Code but when I try to open it by double clicking it or upload it on my hosting won't show up...and I am a bit stuck..

the image is located in C:\Users\new01\OneDrive\Desktop\Site constructor\EcoFarm\img the index.html is located in EcoFarm

here is the code

    <div >
        <div >
            <h1>Eco Farm - Home</h1>
            <p>Lorem ipsum dolor sit</p>
            <button >Discover</button>
        </div>
    </div>

.banner{
    background: url(/img/banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(80vh - 80px);
    text-align: center;
}
.banner-content{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.banner h1{
    color: #fff;
    font-size: 44px;
    padding: 20px 0px 30px 0px;
}
.banner p{
    color: #fff;
    font-size: 16px;
}
.discover{
    color: #fff;
    background-color: transparent;
    margin: 40px 0px;
    height: 50px;
    width: 180px;
    border-radius: 20px;
    border-color:#75D442;
    border-style: solid;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}
.discover:hover{
    background-color: rgba(0, 0, 0, 0.2);
}

CodePudding user response：

It looks like your height property isn't giving a proper value, which is what's breaking the background property. having a height of 100% doesn't actually give the div a real height, instead it says "take up 100% of the parent's height." Since the parent container is the body, in this case, you have to give the parent container a height value.

So, you can do one of two things. Either give the parent container a height value (100vh, 100px, 10em, etc.), or give the banner a height value. See below

/* Option one: 
body {
    height: 100vh;
}
*/

.banner{
    background-image: url('https://www.imgacademy.com/sites/default/files/legacyhotel.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh - 80px); /* option 2 */
    text-align: center;
}
.banner-content{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.banner h1{
    color: #fff;
    font-size: 44px;
    padding: 20px 0px 30px 0px;
}
.banner p{
    color: #fff;
    font-size: 16px;
}
.discover{
    color: #fff;
    background-color: transparent;
    margin: 40px 0px;
    height: 50px;
    width: 180px;
    border-radius: 20px;
    border-color:#75D442;
    border-style: solid;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}
.discover:hover{
    background-color: rgba(0, 0, 0, 0.2);
}

    <div >
        <div >
            <h1>Eco Farm - Home</h1>
            <p>Lorem ipsum dolor sit</p>
            <button >Discover</button>
        </div>
    </div>

CodePudding user response：

it looks like you have to go to .banner in you css code and fix (background:url(image)) to (background-image: url("./image-link-on-your-folder-project") ),

.banner{
    background-image: url("https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(80vh - 80px);
    text-align: center;
}
.banner-content{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.banner h1{
    color: #fff;
    font-size: 44px;
    padding: 20px 0px 30px 0px;
}
.banner p{
    color: #fff;
    font-size: 16px;
}
.discover{
    color: #fff;
    background-color: transparent;
    margin: 40px 0px;
    height: 50px;
    width: 180px;
    border-radius: 20px;
    border-color:#75D442;
    border-style: solid;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
}
.discover:hover{
    background-color: rgba(0, 0, 0, 0.2);
}

<div >
        <div >
            <h1>Eco Farm - Home</h1>
            <p>Lorem ipsum dolor sit</p>
            <button >Discover</button>
        </div>
    </div>