CODEWITHSUNDEEP
htmlcss
CodeByLeon
CodeByLeon

Reputation: 23

Why does background: url(local.png) not work

My problem is that the background url() property only works with online stored images. When i try to display a local stored image it does not work.

My folder structure:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./src/css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>
<body>
    <div class="profile-card">
        <div class="card-header">
            <div class="pic">
                <img src="./src/images/profilepicture.png" alt="">
            </div>
            <div class="name">###</div>
            <div class="desc">Front-End Developer</div>
            <div class="sm">
                <a href="#" class="fa fa-instagram"></a>
                <a href="#" class="fa fa-twitter"></a>
                <a href="#" class="fa fa-github"></a>
                <a href="#" class="fa fa-linkedin"></a>
            </div>
            <a href="#" class="contact-btn">Contact Me</a>
        </div>
        <div class="card-footer">
            <div class="numbers">
                <div class="item">
                    <span>120</span>
                    Posts
                </div>
                <div class="item">
                    <span>127</span>
                    Following
                </div>
                <div class="item">
                    <span>120k</span>
                    Followers
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    height: 100vh;
    background: url(./src/images/background.png) no-repeat center;
    background-size: cover;
}

Upvotes: 2

Views: 532

Answers (3)

Aalexander
Aalexander

Reputation: 5004

Using relative path will be the best here. You have to update your path in the css file to

background: url(../images/background.png) no-repeat center;

The reason is from your css file you have to go down one directory with ../ and then go inside the images folder and there you use the image background.png

Upvotes: 3

mubasshir00
mubasshir00

Reputation: 339

You have problem on file path .use this :

background: url(../images/background.png) no-repeat center;

Upvotes: 1

pavel
pavel

Reputation: 27082

You have to set path relative to your CSS file, or absolute from root.

../images/background.png

or

/src/images/background.png

Your code ./src/images/background.png try to search image in src/styles/images/background.png which is doesn't exist.

Upvotes: 2

Related Questions