Image isn't displaying. What should I do?-CodePudding

<!DOCTYPE html>
<html lang="en">
<head>
    <title>portfolio website</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <link href="https://fonts.googleapis.com/css2?family=Josefin Sans:ital,
    wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
    integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==
    " crossorigin="anonymous" referrerpolicy="no-referrer">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
    font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4t
    Mg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin=
    "anonymous" referrerpolicy="no-referrer">
</head>
<body>
    <!--hero section start-->

    <div >
        <nav>
            <h2 >Portfolio</h2>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <a href="#" >Subscribe</a>
        </nav>
    </div>
    
</body>
</html>

That is my html code above

    *{
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
    box-sizing: border-box;
}
.hero{
    height: 100vh;
    width: 100%;
    background-image: url("file://C:\Users\user\Desktop\pexels-cup-of-couple-6177571.jpg");
    background-size: cover;
    background-position: center;
}

This is my css. Please kindly help me find the problem

I added an image to my css but for some reason it isn't showing. Please I've attached my code above help me check it out.

I'm new to the tech industry and I'll be needing your help with this little issue. I'm also new to stackoverflow so I hope you understand my question properly.

CodePudding user response：

You should put image in your current working directory, And then use relative path of the image.

CodePudding user response：

Change your image path to relative. For example:

.hero{
    height: 100vh;
    width: 100%;
    background-image: url("images/pexels-cup-of-couple-6177571.jpg");
    background-size: cover;
    background-position: center;
}

You can put your image inside 'images' folder. The path in this example is called a relative path which means it is a local file, relative to our project and to our current working directory

CodePudding user response：

   *{
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
    box-sizing: border-box;
}
.hero{
    height: 100vh;
    width: 100%;
    background-image: url("https://images.unsplash.com/photo-1546641082-b3c3d4bfae25?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");
    background-size: cover;
    background-position: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>portfolio website</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <link href="https://fonts.googleapis.com/css2?family=Josefin Sans:ital,
    wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
    integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==
    " crossorigin="anonymous" referrerpolicy="no-referrer">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
    font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4t
    Mg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin=
    "anonymous" referrerpolicy="no-referrer">
</head>
<body>
    <!--hero section start-->

    <div >
        <nav>
            <h2 >Portfolio</h2>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <a href="#" >Subscribe</a>
        </nav>
    </div>
    
</body>
</html>