Почему background: url (local.png) не работает

#html #css

#HTML #css

Вопрос:

Моя проблема в том, что свойство background url() работает только с сохраненными в Интернете изображениями. Когда я пытаюсь отобразить локальное сохраненное изображение, оно не работает.

Моя структура папок:

index.html
Src
- css
  - style.css
- Изображения
  - 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=Poppinsamp;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;
}

1. Я всегда использую url ( example.com/images/background.png ) и это работает. Как насчет этого?

2. @Albeld: относительный путь лучше по многим причинам, в основном при перемещении проекта между сервером разработки / тестирования / разработки.

Ответ №1:

Здесь лучше всего использовать относительный путь. Вы должны обновить свой путь в файле css, чтобы

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

Причина в том, что из вашего css-файла вам нужно перейти в один каталог, ../ а затем зайти в папку images и там использовать изображение background.png

Ответ №2:

Вы должны указать путь относительно вашего файла CSS или абсолютный от root.

 ../images/background.png

или

 /src/images/background.png

Ваш код ./src/images/background.png пытается найти изображение, в src/styles/images/background.png котором оно не существует.

Ответ №3:

У вас проблема с путем к файлу. используйте это :

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