Мое фоновое изображение не хочет появляться! - PullRequest
0 голосов
/ 16 мая 2018

У меня есть HTML-файл с подкаталогом images с изображением home-back.jpg.В моем файле CSS у меня есть:

enter image description here

Мой HTML:

enter image description here

Фоновое изображение не отображается, я вижу только белый фон.Любые идеи, как это исправить, пожалуйста?

Ответы [ 5 ]

0 голосов
/ 16 мая 2018

@ Berrick Проверьте ваш URL ('../ path / to / images')

Каталог ваших файлов изображений должен соответствовать вашей таблице стилей CSS, а ваша таблица стилей CSS должна соответствовать вашему Index.html.

0 голосов
/ 16 мая 2018

Часть ответа уже дана Никатом и Полом. Вы также пропустили ; после высоты.

Находятся ли оба index.html как styles.css в одном (корневом) каталоге? Затем вам нужно изменить путь на background-image: url('images/home-back.jpg').

Я бы предложил написать ваш css следующим образом:

#home {
   background-image: url('../images/home-back.jpg');
   height: 700px;
}

Это облегчает чтение вашего кода и предотвращает небольшие ошибки.

0 голосов
/ 16 мая 2018

У вас нет ссылки на CSS?

<link rel="stylesheet" type="text/css" href="style.css">
0 голосов
/ 16 мая 2018

Я, честно говоря, не понимаю, почему люди делают отдельные файлы CSS, если они не большие и их огромное количество.

вставьте CSS в свой код, выполнив

<style>
All your css in here
</style>

Этот тег <style> входит в тег <head>

Кроме того, обязательно завершите оформление для всего.

Но если вы хотите связать его, используйте <link rel="stylesheet" type="text/css" href="style.css"> в теге <head>.

Я понял, что у тебя проблемы. Если вы не планируете ставить на изображение какого-либо ребенка, вместо этого вы можете сделать его тегом <img>.

0 голосов
/ 16 мая 2018

Я вижу, что вы не связали свой файл style.css.добавьте:

<link rel="stylesheet" type="text/css" href="style.css">

, а также вы не установили ширину для #home.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...