Почему URL фонового изображения CSS не отображает мое изображение, хотя ссылки и пути правильные? - PullRequest
Новая
       21

Почему URL фонового изображения CSS не отображает мое изображение, хотя ссылки и пути правильные?

0 голосов
/ 27 марта 2019

Я пытаюсь отобразить изображение на макете веб-страницы, которую я создаю в качестве фонового изображения. Когда я пытаюсь использовать css background-image и URL, он не загружается. Я пытаюсь поместить изображение как фоновое изображение в раздел заголовка под классом заголовка, но оно просто не загружается. При наведении курсора на путь в скобках отображается миниатюра изображения, поэтому я знаю, что он может получить к нему доступ.

Я перепробовал все - перемещение файла, переименование файла, проверка правильности моих путей, использование и удаление кавычек, обратной косой черты, прямой косой черты, проверка правильности моего пути css в секции head, проверка расширения файла. Когда я щелкаю по имени файла в разделе «Источники» консоли и выбираю «Открыть в новом окне», он просто выводит изображение в новом окне, но Chrome или любой другой браузер не загружает файл по какой-то причине? ! 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
}

header {
    background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
        
        <title>Phil My Glass</title>
    </head>
    <body>
        <header>
        <div class="top-section">
            </div>
        </header>
    </body>
</html>

Файл загружается и отображается нормально, если я вставлю его в HTML-код с помощью тега img, но не будет отображаться из css.

1 Ответ

1 голос
/ 27 марта 2019

Вам просто нужно указать высоту для вашего заголовка - так как он по умолчанию был равен 0 пикселям :-) 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
}

header {
    background-image: url(https://picsum.photos/200/300);
    height: 100px;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
        
        <title>Phil My Glass</title>
    </head>
    <body>
        <header>
        <div class="top-section">
            </div>
        </header>
    </body>
</html>
...