Изучение CSS для новичков / Урок #5 – Работа с фоновыми картинками

При помощи CSS вы можете устанавливать любой задний фон для всего сайта в целом или же для определенных объектов. За урок мы научимся работать с фоном и отображать изображения за счет CSS.

✅ Полезные ссылки:

⏰ Тайм коды:
00:00 - Начало
00:20 - Установка цвета на задний фон
02:35 - Добавление картинки на задний фон
05:55 - Универсальное свойство «background»
09:32 - Фиксированный задний фон
11:55 - Заключительная часть

✔ -------------

- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

[VITOSGTI]

Смотрю твои уроки в перерывах между чтением книги по CSS!
Спасибо!)

[umalishonuy]

12:13 с картинкой можно еще немного поиб... поиграться)

[Кирюшка-иъ]

4:01 на самом деле можно сделать ещё легче нажав на файл/изображение и прожать ctr+shift+c(copy full path) и при нажатии ctr+v ты сможешь поместить весь путь в строку

[Q_roxe]

У меня почемуто не все работает, но это не беда, урок отличный, продолжаем, всем удачи

[АнтонНазарук-щс]

У меня сначала не получалось поставить задний фон из файла, потом разобрался.
Дело было в том что:
1. У меня в файловой системе по умолчанию слеши левые \, а нужно правые /
2. Нужно добавить две точки и косую в начале"../"
Так заработало:
body {

background-image:
height: 100vh; background-size:cover;
}

[astronaut]

спасибо за урок*) только на 8:05 когда я у себя в сss написал top у меня на сайте экран белым стал ! все пропало(

[ВладиславИскренков]

Спасибо большое за ваши курсы! Четкие, понятные и без воды! Но у меня есть вопрос: подскажите, пожалуйста, на сколько является безопасным брать картинки с яндекса или гугла или со стоков картинки для сайта, могут ли оштрафовать за нарушение авторских прав? знаю, что есть определенные параметры по поиску картинок. Но в интернете слишком много разной и протеречивой информации по этому поводу.

[chekhu]

у меня почему то бэкграунд колор не работает

[estrka]

лучше наверное использовать VS code т.к. в нём можно выбрать цвет не переходя на страничку выбора, прямо в программе

[kostiantynraslin]

Такое ощущение, что background fixed не сработал. Одинаково что так, что так. При фиксед картинка не долдна скролится, а стоять натместе

[SuperRob]

Почему в Notepad++ background-image url не работает? Цвета работают и все остальное

[ГОРОДСКИЕЛЕГЕНДЫ-ьф]

Почему пропадает картинка, когда пытаешься включить background-repeat?

[jobmail]

А почему не работают ссылки в кавычках?

[МарфаКолодяжна]

Почему не все картинки из google можно использовать? У некоторых огромные url адреса . Они что как-то защищены от копирования на сайты?

[ebupek]

Фотография "Ремнантские фокусы" оправдывает своё название. Потому что у меня ничего не меняется

[Андрей-змш]

Коллеги, может, кому-то поможет.
Повторял за уроком, взял локальный файл для фона, но в постановке фоновой картинки у меня ничего не происходило, хотя код был как во всех туториалах.
На фоне картинка не появлялась, хотя другие команды, например, фоновый цвет, работали корректно.
Вам стоит открыть ваш html через браузер, посмотреть код элемента. В окне CSS команда отображалась. Но в консоли было сообщение об ошибке, что файл не найден. Там же в консоли можно нажать на ссылку к файлу и посмотреть, как браузер видит указанный Вами путь. Попробуйте указать полный путь к файлу, также будьте внимательны при копировании файлового пути в windows, автоматически там используются обратные слеши.

[ВаняБлажко-ьл]

у вас есть кроки по js для web-разработок

[ye-dl]

Проблема такая, у меня два файла, индекс и css, в тег body пишу задний фон все работает, а когда несколько страниц то не работает, почему так?

[user_nikkon]

Что прописано во вкладке "index.html" полностью (с 3 по 9 строку) ?

[Музыка-кж]

Привет, Гоша! Объясни, пожалуйста, в чем разница между ПРОСТО добавлением картинки и добавлением картинки с BACKGROUND-ATTACHMENT: FIXED; ?
Просто в обоих случаях картинка стоит на месте, но какая-то разница при перемещении по сайту чувствуется.