Изучение CSS для новичков / Урок #5 - Работа с фоновыми картинками
Переглядів 102,757
День томуПри помощи CSS вы можете устанавливать любой задний фон для всего сайта в целом или же для определенных объектов. За урок мы научимся работать с фоном и отображать изображения за счет CSS.
✅ Полезные ссылки:
🔫 Курс на сайте itProger: itproger.com/course/css/5
⏰ Тайм коды:
00:00 - Начало
00:20 - Установка цвета на задний фон
02:35 - Добавление картинки на задний фон
05:55 - Универсальное свойство «background»
09:32 - Фиксированный задний фон
11:55 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼💻
- Все уроки по хештегу #itprogerLessons
@umalishonuy7977 3 роки тому
12:13 с картинкой можно еще немного поиб... поиграться)
@ava_crey 2 місяці тому
Щас заметил это 😂
@VITOSGTI 3 роки тому
Смотрю твои уроки в перерывах между чтением книги по CSS! Спасибо!)
@user-zi2nz3db5f 2 роки тому
Друг, а что за книга, если не секрет?
@roman3403 2 роки тому
@@user-zi2nz3db5f нашли что-то?
@user-zi2nz3db5f 2 роки тому
@@roman3403 да только видео-уроки по вёрстке сайтов. Пока хватает информации
@ksenrix 8 місяців тому
Всё понятно ). За это спасибо !:)
@livius0653 3 роки тому
Thank you and thanks for lesson!!!
@zxs_DEADinside 5 місяців тому
спасибо за урок 😁
@user-ug5xh8wu9z Рік тому
Все понятно) спасибо большое
@user-ml5ko3fv8m Рік тому
У меня сначала не получалось поставить задний фон из файла, потом разобрался. Дело было в том что: 1. У меня в файловой системе по умолчанию слеши левые \, а нужно правые / 2. Нужно добавить две точки и косую в начале"../" Так заработало: body { background-image: url('../img/background.jpg'); height: 100vh; background-size:cover; }
@DeBalzac Рік тому
Спасибо, бро, а то я уже хотел мак выбросить...
@juliaswn296 Рік тому
Какая огромная помощь от таких комментариев! Спасибо Вам!
@ssggbet 8 місяців тому
бля, братан, ты лучший, я тут чуть ли экран ноута не разбил, дай бог тебе здоровья
@mrmain3402 6 місяців тому
бля бро отдуши я не мог рахобраться в чем причина пока не прочиал твой коммент
@Normchilen228 4 місяці тому
Спасибо
@user-lz2ep9ir4w 2 роки тому
У меня почемуто не все работает,но это не беда,урок отличный,продолжаем,всем удачи
@smileofnight9187 Рік тому
п
@sergeystebenev2309 Рік тому
почерпнул для себя много нового
@user-xc1tz7hu4l Рік тому
Полезное видео
@user-go7et1ol4m 9 місяців тому
Спасибо большое за ваши курсы! Четкие, понятные и без воды! Но у меня есть вопрос: подскажите, пожалуйста, на сколько является безопасным брать картинки с яндекса или гугла или со стоков картинки для сайта, могут ли оштрафовать за нарушение авторских прав? знаю, что есть определенные параметры по поиску картинок. Но в интернете слишком много разной и протеречивой информации по этому поводу.
@grovestreet2126 2 місяці тому
Если собираетесь создать свой собственный сайт, где будут использоваться картинки взятые с интернета - то могут оштрафовать. Лучше создайте свою правдоподобную картинку, чтобы не было нарушение авторских прав)))
@TheBigChannel_ Рік тому
🙏🏻
@astronaut1751 2 роки тому
спасибо за урок*) только на 8:05 когда я у себя в сss написал top у меня на сайте экран белым стал ! все пропало(
@Pavel_Derevyanko 3 роки тому
👍
@user-sp7cx4lw6p 2 роки тому
у вас есть кроки по js для web-разработок
@4ebupek067 8 місяців тому
Фотография "Ремнантские фокусы" оправдывает своё название. Потому что у меня ничего не меняется
@user_nikkon777 18 днів тому
Что прописано во вкладке "index.html" полностью (с 3 по 9 строку) ?
@chekhu4707 Рік тому
у меня почему то бэкграунд колор не работает
@user-ws6gh8pj1r 3 роки тому
Привет, Гоша! Объясни, пожалуйста, в чем разница между ПРОСТО добавлением картинки и добавлением картинки с BACKGROUND-ATTACHMENT: FIXED; ? Просто в обоих случаях картинка стоит на месте, но какая-то разница при перемещении по сайту чувствуется.
@holy2785 3 роки тому
Смотри, Если не указывать background-attachment: fixed, то картинка будет отображаться как обычно, как допустим превью на ютубе. А если указать данное свойство, то картинка как бы будет всегда показывать одно и то же, то есть стоять на месте. Если ничего не понял попробуй пересмотреть момент в уроке с данным свойством, либо создай свою картинку с большей высотой, тогда данный эффект будет лучше заметен. Надеюсь что помог.
@deadinside3732 2 роки тому
@Amas JAVASCRIPT Ну как, ответил?)
@user-nl4lh7fd3z Рік тому
@@holy2785 А подскажите, пожалуйста, как моментально за комментировать кусок кода как показано на 5:51? Буду очень благодарен
@foxworld7064 11 місяців тому
@@user-nl4lh7fd3z ctrl + /
@nikizzer7464 3 роки тому
Не понятно почему, но в CSS файле привязка URL к папке IMG/jpg не работает. А вставил в HTML в head, через атрибут style всё работает. При этом шрифты и цвета из css работают. Но всё равно спасибо за ваши труды и объяснения. Я имею ввиду картинку для бекграунда не отображает, хотя видит дорожку.
@itproger 3 роки тому
Если в css, то пропишите выход на уровень выше: ../img/jpg
@erikweisz8924 2 роки тому
@@itproger не отображается всё равно
@eda_obzor_eda 2 роки тому
../img/some.jpg
@MAM6AMAN Рік тому
@@user-vu9qk3zs8v я так и не смог через папку вставить картинку, все испробывал
@user-vu9qk3zs8v Рік тому
@@MAM6AMAN давай я тебе помогу. Я это давно писал этот комментарий, шас уже стал профи.
@Voxert Місяць тому
Что там можно с картинкой сделать?
@kostiantynraslin7298 Рік тому
Такое ощущение, что background fixed не сработал. Одинаково что так, что так. При фиксед картинка не долдна скролится, а стоять натместе
@xeither289 2 роки тому
☦❤🙏💕❤☦
@user-kf8uk3yz3w 2 роки тому
как вставить сферическую панораму? заранее благодарю!
@Normchilen228 4 місяці тому
загугли
@immensity1510 Рік тому
кто-то может подсказать почему когда пишу в background: cover то картинка пропадает и белый фон появляется? Также пробовал с background-size: cover результат один и тот же
@valitovazamat Рік тому
напиши любой текст в див
@user-ud2jr7vs8t 2 роки тому
Почему не все картинки из google можно использовать? У некоторых огромные url адреса . Они что как-то защищены от копирования на сайты?
@Voxert Місяць тому
хз
@jobmail8313 4 місяці тому
А почему не работают ссылки в кавычках?
@user-hl2el5cz8e 2 місяці тому
как ставить одинарные кавычки?
@diasoralbekov6465 3 роки тому
офигенно но я не понял зачем было создавать дивы в конце?
@holy2785 3 роки тому
Что-бы создать блоки, и в дальнейшем задать им размер.
@777noob777saibot 2 роки тому
Чтобы вместить дополнительные элементы страница стала больше по вертикали...в результате её стало можно прокручивать колёсиком. При прокрутке фоновая картинка тоже прокручивается, но добавление background-attachment: fixed фиксирует картинку и она не прокручивается вместе с остальными элементами.
@nersisyan202 Рік тому
Объясните пж для чего div??
@andreasdekadnt7140 Рік тому
Для создания отдельного блока с информацией на странице.
@nersisyan202 Рік тому
@@andreasdekadnt7140 больше спасибо
@user-bl4qw7ni4n 6 місяців тому
Проблема такая, у меня два файла, индекс и css, в тег body пишу задний фон все работает, а когда несколько страниц то не работает, почему так?
@user-bl4qw7ni4n 6 місяців тому
А все, линкануть забыл😅
@govdamikhaylo4183 3 роки тому
Блин когда будет видос про анимации
@holy2785 3 роки тому
Это тебе уже в JawaScript)
@yMastera 3 місяці тому
url адреса срабатывает фон, а вот картинку сколько раз не вставлял и по разному, но не в какую. я прошу прощения за свою назойливость.. но в нашем городке нет таких курсов по фронтэнт направлениям 🤷♂ есть курсы 1С 😜 но это не моё
@user-ll4qe9kk1r 2 місяці тому
Честно не знаю Правильно ли я понял твою проблему, но у меня было такое что я оставлял фото с устройства но они не срабатывали оказалось надо было чтобы картинки были в той же папке что и HTML
@OpO738 2 роки тому
если картинка не вставляется: background-image: url('../img/fon.jpg')
@night_furyczgs6804 Рік тому
Пробуй передний слеш убрать
@blackspider6956 2 роки тому
Не знаю в чем проблема, но когда я пытаюсь вставить изображение в тег div через id, изображение просто не появляется
@itproger 2 роки тому
Значит путь неверно прописан
@zekoff6380 2 роки тому
Постоянно вбивать "Color picker" шляпа :) Выучить HTML и написать свой :)
@JakeAdvenTime 2 роки тому
@macksymtarkovich1096 3 роки тому
Щоб убрати верхні відступи у Google Chrome просто в body задайте значення margin: 0; and padding: 0;
@user-ww8lo6kw8s 2 роки тому
Дякую
@user-xu3xf4uq7k Рік тому
Я уже 2 день не могу и цвет и картинки ставить 😢 Что можешь быть причиной ? Help me
@V9vik Рік тому
Получилось исправить?
@muhammadkurbonov4779 11 днів тому
там для пути нужно сначала поставить слеш пример: background-image: url('/images/2.jpg');
@nataliar6364 Рік тому
обьясните пожалуйста а как каментировать код?
@nersisyan202 Рік тому
/* some text */
@SAMANUELb 9 місяців тому
или же выдели кусок кода, который ты хочешь превратить в комментарий, и нажми ctrl + /. Это работает не только в css, но и в html, и в языках программирования
@meri_mari 2 місяці тому
3:26 копирую url и силка огроменная
@Angry_Welder 6 місяців тому
Хочу поделиться опытом. Не читайете всякие шляпы типа Head First - Изучаем HTML, XHTML и CSS. 720 страниц! Я прочитал раньше. Там моооре воды.HTML и CSS вообще мелоч, там все просто. Все что нужно знать - это HTML - разметка текста, CSS - это задание стилей тексту в HTML по тэгам. Лучше Javascript, Python или PHP изучать.
@Absolutely771-sf5ey 2 місяці тому
какие книги посоветуете для изучения js, php и html c CSS?
@Huseynov361 Рік тому
+
@FreakCutTW Рік тому
если ещё кто картинку не смог вывесли пишите отвечу под комментом
@beynertv7276 Рік тому
5:28
@supermanpunch8063 Рік тому
7:34 у меня так не работает!
@xeither289 2 роки тому
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ
@Akaza8800 2 місяці тому
По мне слишком много воды, я учил основы CSS которые больше всего используется для верстки сайтов или нужны тем кто только начинает учить.
@etonorma2741 3 роки тому
в чем разница одинарных и двойных ковычек?
@itproger 3 роки тому
Никакой разницы
@user-zr8ib4ib9u 3 роки тому
@@itproger вах ты отвечаешь на комментарии ? Слушай если я задам вопрос ты всегда ответишь?
@user-vu9qk3zs8v Рік тому
Когда пишешь коды на PHP тогда узнаешь. А так разницы нет
@DeBalzac Рік тому
Гм... а я скачал картинку и указал путь - не работает. Сто раз проверил точность - не работает. В то время как картинка из сети отображается норм. ХЗ в чём прикол.
@urrchach 8 місяців тому
нужно еще помочь? у меня вроде как есть решение
@DeBalzac 8 місяців тому
@@urrchach нет... спасибо.
@urrchach 8 місяців тому
@@DeBalzac а ты сам решил?
@DeBalzac 8 місяців тому
@@urrchach да
@xeither289 2 роки тому
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС
@13-th_Lord 3 місяці тому
3:20 -- Совет: Будьте осторожны в выборе изображений)) А то может получиться как у меня)) file:///C:/Users/Пользователь/Desktop/SCR3248-A/UWU/index.html#
@johnmorton5692 3 роки тому
Не понятно почему, но в CSS файле привязка URL к папке IMG/jpg не работает. А вставил в HTML в head, через атрибут style всё работает. При этом шрифты и цвета из css работают. Но всё равно спасибо за ваши труды и объяснения. Я имею ввиду картинку для бекграунда не отображает, хотя видит дорожку.
@andku2689 3 роки тому
Если поместить JPG в одну папку с CSS, то нормально работает привязка
@holy2785 3 роки тому
Скинь код, если не сложно. Попробую помочь.
@Andrew-hh7ht 3 роки тому
@@holy2785 head{ background-image:("img/some.jpg"); } Помоги пожайлуста я все зделал как было на видео но моя картинка не хочет вставляться
@Andrew-hh7ht 3 роки тому
@@andku2689 НЕ РАБОТАЕТ
@isidisiz8075 2 роки тому
@@Andrew-hh7ht укажи полный путь начиная с диска, у меня тоже не работало, нужно было просто указать полный путь
Школа itProger / Программирование
Переглядів 83 тис.
DKA-DEVELOP
Переглядів 2,8 млн
Р@ССИЯН ПРИВОЗЯТ ПО ЧАСТЯМ! Он пойдет на войну, умрёт, а я куплю квартиру и оденусь/Золкин, Карпенко
Апостроф TV
Переглядів 1,2 млн
Школа itProger / Программирование
Переглядів 100 тис.
Школа itProger / Программирование
Переглядів 88 тис.
Школа itProger / Программирование
Переглядів 153 тис.
Фрілансер по життю
Переглядів 365 тис.
Школа itProger / Программирование
Переглядів 177 тис.