2

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:

  • index.html
  • src
    • css
      • style.css
    • images
      • background.png
      • profilepicture.png

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;
}
Chris
  • 4,009
  • 3
  • 21
  • 52
CodeByLeon
  • 23
  • 5
  • 1
    I always use url(https://www.example.com/images/background.png) and it works. How about that? – Albeld Jan 02 '21 at 14:45
  • 3
    @Albeld: relative path are better for many reason, basically when you move project betwen dev/test/prod server. – pavel Jan 02 '21 at 14:46

3 Answers3

3

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

Aalexander
  • 4,987
  • 3
  • 11
  • 34
2

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.

pavel
  • 26,538
  • 10
  • 45
  • 61
1

You have problem on file path .use this :

background: url(../images/background.png) no-repeat center;
mubasshir00
  • 307
  • 3
  • 9