CSS свойство BACKGROUND. Делаем фон для сайта // Уроки HTML CSS JS. Урок №9
HTML-код
- Опубликовано: 5 авг 2024
- CSS свойство BACKGROUND. Делаем фон для сайта // Уроки HTML CSS JS. Урок №9
Универсальное CSS свойство background позволяет одновременно задать несколько
характеристик фона а именно определить цвет фона, установить фоновое изображение, задать начальное положение фонового изображения, определить как будет повторяться фоновое изображение, установить будет ли прокручиваться фоновое изображение вместе с содержимым и масштабировать фоновое изображение согласно заданным размерам.
Так же значением CSS свойства background может быть указана градиентная заливка фона.
🔴 Разбор домашки: • Верстка простого сайта...
🔴 Шпаргалка (методичка) CSS свойства background: fls.guru/cssbackground.html
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle
Или качай по ссылке: fls.guru/files/tutorials/css_...
🔴 Весь плейлист с уроками по HTML CSS JS верстке:
• БЕСПЛАТНЫЙ курс по вер...
Содержание:
0:00 - Подготовка к уроку
0:48 - Краткое описание функций background
1:24 - Методичка
1:44 - Задание общих свойств элементам
2:18 - background-color
5:09 - background-image
11:05 - background-repeat
13:03 - background-position
15:58 - background-attachment
19:05 - background-size
23:22 - установка нескольких фоновых изображений
26:13 - Ещё один способ применения background
29:24 - Домашка
29:58 - Напутствие
🤟 Спасибо Emil Chapchakchi
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
Ребята, надеюсь выпуск понравился! Тут еще пара полезных ссылок:
Чат по верстке: t.me/flschat
Instagram: instagram.com/freelancer.lifestyle
Telegram канал: t.me/freelancer_lifestyle
Facebook: facebook.com/freelancerlifestyle
Привет, а как у тебя настроен Subline что ты вводишь шестнадцатиричный код и он сам окрашивается в цвет свой?
@@ZellKill посмотри у Жени в плейлисте - там есть цикл видео о годных сервисах и прогах для верстки, в том числе про sublime!
Привет, никак не могу понять, почему теги h1-h6 при подключении файла css к html перестают выполнять свою функцию и показываются маленькими и не жирными словами? Настройки css я не менял, настраивал как у тебя. Для проверки себя, скачал документ под этим видео и попробовал ввести теги для заголовка в твоих документах. Тоже не работает. Так и должно быть или в чем-то есть проблема? Если убрать подключение css к html, то все становится так, как должно быть.
@@user-tf5ll7mq7j потому, что стоит обнуление свойств
h1,
h2,h3,h4,h5,h6 {font-size: inherit; font-weight: inherit;}, inherit - это наследование, надо задавать по новой, в css, для каждого
Огромное тебе человеческое СПАСИБО!!!!
Ты проделал такую громадную работу! благодаря тебе в моей голове все раскладывается по полочкам!!!
После фразы: "я тут заморочился и сделал для тебя методичку", первая моя мысль: "да так не бывает!!!"...Ты очень крутой, спасибо тебе за твои уроки
Пожалуйста!
Согласна. Очень приятна забота )
@@FreelancerLifeStyle ще раз дякую за труд...
согласен абсолютно я был очень приятно удивлен .
Сначала когда он показал методичку, то подумал, что там будут просто свойства выписанные. Но когда увидел примеры, то через секунду влепил лайк. Это очень благородная работа
Моя реакция после слов "я тут заморочился и сделал для тебя методичку" - "Да он святой!!!" Огромное спасибо!
Пожалуйста!
Пресвятой!
обучайся, развивайся и помни: живи, а работай в свободное время! Это будет моим слоганом по жизни! Жека, спасибо тебе огромное!
Пожалуйста!
Уважение такому человеку!
Впервые вижу что-бы автор так отдавался своей аудитории!
Уверен что тот кто тебя смотрит запомнит тебя!
Тебе уже отведенно место в истории (данной тематики)!
Ещё раз большое тебе уважение и признание как Сенсею!
Выпуск просто огонь! Методичка пушка бомба! Жалко нельзя поставить больше 1 лайка. Спасибо огромное!)
Спасибо большое! Такой коммент сойдет за второй лайк! 👍
Просто «с языка снял») Блин, ну почему нельзя по 10 лайков лепить за раз???
👍🏼*10 tab
Я даже заморочился и нашел программу которая полностью скачивает сайт. Я эту методичку скачал целиком)))
+++++++
Евгений!!! Кроме уважения твои уроки вызывают еще чувство дикого восторга. Так держать "Сэнсэй"!!!
Я научился быстро копировать, вставлять текст, а мне 33 года. Раньше я думал что верстка это как ракеты строить!!!! С тобой, со временем, мы тоже станем СЕНСЕЯМИ!!! Так держать!!!!!!! Кстати ты мне другом стал, я тебя неделю смотрю, и даже во сне ты меня верстке обучаешь!!! Жму руку!!!
Спасибо! Я рад что это полезно!
Ну как успехи?
@@mykolanychyporuk9530 норм
Жека, ты даешь за 30 мин больше и гораздо понятнее, чем на платных курсах мутят 4 часа!!!👍
За методичку отдельное спасибо, это как бы урок в уроке.
Найкращі наочні і практичні матеріали, які вдалося знайти в межах інтернет-простору за рік) Щиро дякую!😊
Будь ласка!
Никогда не комментировал видосы . Но ты реально очень крутой мужик . Подача материала захватывает, столько полезной информации , что каждый урок смотрю на одном дыхании. Потом как маньяк тренируюсь на всем что только можно. Такого желания учиться еще не было , ты даешь информацию так , что любой дурак поймет ) ! Респект тебе . Пусть твой канал растет!
Спасибо большое!
Привет, как успехи?
@@evgeniy712а в тебе?)
Да нужны шпаргалки :)
Ок))
чота маловато лайков под этим комментом. Просмотрело уже за 100 т. раз, а лайков только 98...
шпаргалка не работает :(
@@zorakn185 , странно, у меня всё работает. Может другим браузером попробовать открыть?
для ответав на экзамене
Привіт. Дуже корисна та практична інформація. Дуже дякую за додаткові сайти, посилання, роз'яснення , домашні завдання, конспект. Я всім користуюсь та йду до поміченої цілі. Я особисто дуже тобі вдячна. Продовжуй в тому ж натхненні !!! Успіхів в твоїй справі!!!
Привет из 2022)) Шикарный урок, очень много нового! Спасибо за труд! А шпаргалка - это просто байрактар🤟
Женя, я в восторге! Каждый урок - кладезь знаний и твоего опыта. Методичка и всякие дополнительные материалы это забота о своих учениках. Подача сложного материала с такой простотой, тонким юмором и уважением ко всем делает твои уроки притягательными. Я рада, что у меня такой классный Учитель с большой буквы!
Спасибо большое!
0:00 - Подготовка к уроку
---0:48 - Краткое описание функций background
---1:24 - Методичка
---1:44 - Задание общих свойств элементам
2:18 - background-color
---3:35 - кодировщик цвета
---4:13 - о RGBA
---4:51 - отдельная запись свойства background-color
5:09 - background-image
---6:34 - бесшовный фон
---7:48 - Линейный/радиальный градиенты
---9:36 - Инструмент для создания градиентов
11:05 - background-repeat
13:03 - background-position
---13:24 - быстрая запись свойства background
---13:51 - позиционирование картинки
15:58 - background-attachment
19:05 - background-size
---19:21 - запись значений
---22:02 - растянуть по ширине/высоте
---21:03 - непропорциональное растягивание
---21:29 - contain
---22:09 - cover
23:22 - установка нескольких фоновых изображений
26:13 - Ещё один способ применения background
---26:45 - подготовка основных стилей для списка
---27:26 - картинка для каждого пункта списка
29:24 - ДОМАШКА
29:58 - outro
Спасибо большое! В описание добавил, автора отметил)
Да, а у тебя есть дар преподавателя, подача материала супер)))
Спасибо!
Действительно как и пишут уникальные уроки, да еще и с исходниками,с допматериалами, методичками и ссылками на полезные ресурсы. Мое почтение и уважение к Вашему труду!
Я проходил много разных курсов, по разным темам (для общего кругозора). Когда решил пойти в IT то начал с изучения JAVA, но через 3 месяца понял, что действительно мне нравится больше фронтенд. Учусь месяц. За все это время просмотрел много разных авторов и даже прошел бегло курс в интернете(бета-халявная-версия), но то, что я обнаружил на этом канале даже сравнивать нельзя ни с кем! Пишу комментарии оооооооооооооочень редко, и только этому каналу хочется написать целую книгу отзыва! Нет предела благодарности автору за такой канал!!!
Обалдеть можно! Неужели существует канал где так круто и доступно излагают столь ценные знание. Вы непревзойденный учитель. Благодарю Вас за нелегкий труд !!!!!!
Спасибо большое!
Напевно, єдиний канал в ютуб, в якому завжди тільки позитивні відгуки!!! Без сумніву ви це заслужили кропіткою працею і доброю душею!
Жека. Чудовий вчитель.Велика шана та подяка. Харків!
Ты топовый препод!!! Гуру!!! Залип учусь с особой страстью. всё понятно объясняешь!!!
Я рад!
Спасибо, Жека! Ты - лучший!
Очень редко берусь писать комментарии, но в данном случае, не поблагодарить за такой контент - это грех)))!
Канал - шикарный, подача - лучше некуда, нужной и полезной инфы - вагон!
Успехов тебе в развитии канала... да и вообще во всём!
Спасибо большое! Рад что полезно!
Женя, спасибо! Уроки замечательные! Смотришь и думаешь, что лучше не бывает, а тут ещё и методичка подъехала :)
Вы такой молодец! я так рада что нашла ваш канал, смотрю с удовольствием! Спасибо за предоставляемый контент, нигде еще в интернете не встречала такого)
У человека просто талант обьяснять сложные вещи доступным языком.Естественно,плюс большая подготовительная работа,однам методичка чего стоит!!!
Спасибо! Стараюсь)
Рада, что встретила твой канал, просто, интересно и со вкусом) Процветания творчеству 🌻
Спасибо большое!
Просто лучший. Такого годного контента - максимально полезного и без воды, на ютубе не видел.
Большущее спасибо за урок! Урок просто огонь, бомба, ракета и много таких офигенных слов! Жека - огромное спасибо тебе за такой ресурс!
Думал про маркированый забудешь, но нет, Жека все помнит! Спасибо, как всегда на уровне!
Спасибо!
Спасибо! Благодаря видео удалось решить задачу с макетом, по которому нужно вложить 7 разных фонов в блок, разного размера. Ломал голову 2 дня, как их вложить и сделать адаптивными, благодаря опыту и знаниям Евгения, получилось! Может конечно, и с ошибками у меня вышло, но всё держится, вёрстка не рассыпается. Спасибо ещё раз!!!
Пожалуйста!
Кучу новой информации узнаю. С такой подачей, материал быстро усваивается. Спасибо огромное!
Ну просто МЕГА ценная инфа в каждом уроке! Миллион благодарностей!
Дуже цікавий урок з якого взяв для себе багато корисного, ще раз дякую за те що ти робиш , твої відеоуроки одні з кращих якщо не найкращі особисто для мене ;)
Дуже дякую! 👍😊
Я просто в шоке от подачи материала,от заботы Жеки о нас ,блин ,у меня слов нет ,Бро ты невероятно крутой спец и хороший человек!
Где же ты был со своими видео 5 лет назад когда было желание но не было таких зачетных видосиков ) После просмотра твоих видео появилось очень сильно желание изучать узнать все ну или максимально много ) Спасибо тебе . Красава )
Как здорово всё сделано ! Уж не помню сколько раз я уже просмотрел этот урок и буду смотреть дальше. Спасибо за проделанную работу !
А шпаргалки, конечно, нужны !
84 лайка этому человеку за этот выпуск и методичку и структурирование материала.
Не все могут реализоваться как хороший специалист и как хороший учитель одновременно.
Этот смог.
Спасибо большое! Стараюсь!
Женя, спасибо, а за шпаргалки еще одно спасибо, они конечно же нужны😊
Спасибо! Будут!
Большое тебе спасибо! Таких уроков просто нигде нет. Очень много даёшь людям, которые хотят в этом развиваться! Респект!
Очередной урок как всегда на высоте. Шпаргалки очень помогают! Пожалуйста не переставайте создавать такие нужные и очень полезные уроки!
Это очень круто, выпуск 🔥, шпаргалка 🔥, удачи тебе, ты ее заслуживаешь)
Комментирую, не останавливаюсь просто комментирую)) Спасибо за урок, за шпаргалку и мотивацию!
Пожалуйста!
Огромное спасибо Евгений за твои труды, они бесценны!
Супер понятное изложение, спасибо огромное! Куча выпусков уже пересмотрела, просто офигено!!!
Очень круто, я просто в восторге. А шпаргалка заслуживает отдельный поклон. Бесценная инфа, спасибо! Процветания твоему каналу :)
Спасибо!
Смотрю ваши выпуски вместо сериалов 😁 очень интересно и увлекательно. Никогда бы не подумала,что меня может заинтересовать верстка сайтов 🙄
Спасибо вам огромное 😌
Комментарий дня! Спасибо!
Канал супер! Реально лучшее что есть по теме в ютубе.
Круто! Лучший материал, подан кратко, по делу, при этом харизматично. Переход между теорией и практикой сбалансирован шикарно. Спасибо за такой труд!)
Просто Топ. Куча годноты, и крутая домашка
Очередной полезный интересный и доступный для понимания выпуск. Продолжай! )
Спасибо!
Спс за такую поддачу и особенно за твой труд при написании шпаргалок, мало увидишь такой подход к своему делу!
Такая колоссальная работа! Сердечно благодарю за твой труд. Крутой канал, очень доступная подача, спасибо))
Очередная благодарность! Очень понравилось, приятно и интересно было обучаться. Доходчиво, увлекательно. :) Ещё раз спасибо.
Спасибо! Большое!
Господи, сколько сил вложено для объяснения. Прям огромнейшее спасибо!
Лайк, подписка однозначно)
Спасибо!
Крутой урок! Шпаргалки очень в тему! С Вами реально понимаешь больше, чем на курсах. Спасибо за обучение!
Отличная и внятная подача материала! Очень полезный материал, а методичка это вообще шедевр! СПАСИБО ОГРОМНОЕ!
Все очень круто! Объяснения и методички супер!)
Спасибо!
Спасибо за такой труд, шпаргалки огонь, очень комфортно с ними заниматься.
Пусть в 2020 будет 100 000 тыщ подписоты!
Спасибо большое!
Женя, я как новичок в этом деле, просто получаю от тебя море позитива и океан информации, спасибо тебе огромное)
Спасибо! Уроки простые, понятные и в то же время очень грамотно и мудро построены.
Дружище, я тоже рыжий! Очень приятно, что солнечные люди делают классные штуки и фактически бесплатно открывают людям окно в новую жизнь. Таких добряков редко где можно встретить. В ноги кланяюсь просто! Добра тебе)
Рад что нравится!
Уже 10 урок, но я не перестаю удивляться стараниям автора. Евгений спасибо тебе за этот не легкий труд!
Очень крутая шпаргалка! Спасибо, Женя, и за урок тоже! Все легко запоминается!
Очень круто! Доступно, без всякой воды! Спасибо.
Никогда не оставляю комментарий. Но тебе Ев(Гений) огромная благодарность за твои труды,потому что твой способ подачи материала лучше всех на ютубе,который я видел.С меня лайк на каждое видео и подписка!! Но всегда найдутся уроды,которые поставят дизлайк. Удачи тебе и процветания.Продолжай в том же духе.И очень надеюсь,что в будущем будут уроки по JS.👍😎
Спасибо большое!
@@FreelancerLifeStyle Тебе СПАСИБО хороший человек
Блин, что же будет дальше? Женя, просто нет слов! Так заморочиться. Браво!
Спасибо!
Супер! Спасибо! Не раз буду пересматривать , чтоб все лежало в голове твердо. И да за шпаргалочку- спасибочки🤩
спасибо, очень доступно , и очень живо не недно рассказываешь, объясняешь, могу смело сказать один из лучших ютуб каналов!Спасибо
Жека поздравляю с 200 тысячами подписчиков. Большое спасибо за твой труд.
Спасибо!
Спасибо большое, за Ваш Труд! Вы Труженик и Профессиональный - Специалист, в своём деле! Спасибо
Пожалуйста!
Методичка!!! Вау. Огромное спасибо что заморочился, далеко не все так делают. Лучший сенсей по вебу!
Нереально крутая подача материала, с каждым уроком становится развиваться всё интереснее )). У Вас определённо талант передавать знания!👏 Огромнейшее спасибо🙌
Евгений, спасибо Вам огромное за такую прекрасную подачу материала и за такие шикарные вещи как шпаргалка. На платных курсах так не заморачиваются с подходом к донесению информации, а Вы так отлично все продумали. Из Ваших видео получаю больше информации и она лучше усваивается, чем на платных курсах. Еще раз СПАСИБО!
выше всяких похвал!!! прекрасный урок! все понятно! спасибо огромное!
Пожалуйста
Это космос, конечно. Столько труда и заботы о слушателе. Просто золото. Спасибо.
просто лучший канал с видеоуроками по созданию сайтов, не знаю что может его переплюнуть
Идеальный урок. Даже нечего добавить. На фоне того по чем я учился точно). Информация, которая тут изложена за пол часа, при самостоятельном изучении может отобрать огромное количество времени. Женя, спасибо) PS. С превью в правом углу экрана отличная идея, смотрится живее). Если намутить еще где то зеленый фон, и освещение, то будет еще круче)
Спасибо большое! Ну что ж, всегда есть куда рости :)
Спасибо большое за этот курс, просто находка для начинающего :)
Пожалуйста! Я рад!
Женя спасибо тебе огромное за отличное обучение!!!
Твои видео ролики приятно смотреть, много интересной информации, а так же много бонусов ( шпаргалки, домашки, и полезные ресурсы, которыми ты сам пользуешься)
Благодарю от всего сердца. Вы Человек который помогает очень многим освоить новую профессию. Редкий случай хорошего контента от хорошего человека. :-)
Шпаргалка супер. Было-бы круто и по остальным урокам. Спасибо тебе большое, уроки просто аж залетают )))
Есть везде где нужно!
Шпора отличная, очень наглядно. Спасибо
Спасибо!
Женя, выпуск огонь! Методичка просто супер! Спасибо тебе, чисто по-человечески:-)
Канал просто находка. Спасибо за проделанный труд. Смотрим дальше.
Спасибо большое. Это нереально круто. Методички нужны
Спасибо!
В первый раз бросил обучение в IT из-за некачественного преподношения материала. Затем было обучение на раскрученных курсах и по книгам. Зашел посмотреть Ваш курс для закреплению имеющихся знаний и сильно удивился, что человек абсолютно бесплатно преподносит информацию в потрясающем стиле. Если бы мои первые учителя обладали Вашими способностями в преподавании, мое обучение закончилось бы в разы быстрее. Спасибо Вам за Ваш труд! P.S. Если обладаете таким же скиллом в JS, то было бы очень круто, если запишете по нему отдельный курс. Еще раз respect за Ваш курс, пока он самый крутой из всех платных и тем более бесплатных что я видел.
Спасибо! По JS будет отдельный курс
Большое спасибо за такие невероятно подробные и содержательные уроки, отдельное спасибо за методичку. Это максимально профессиональный подход ! СПАСИБО !!!!!!
Как всегда на высоте! Отдельное спасибо за потрясающую шпаргалочку!
Спасибо большое за такие обучающие ролики, лучшие, которые видел в рунете, как же я рад, что я нашел твой канал. P.S шпаргалки топ!
Я рад!
Ты самый офигенный фрилансер ты просто СУПЕР МОЛОДЕЦ
Спасибо ☺
Женя, ты очень крутой! спасибо тебе большое! Твой БЕСПЛАТНЫЙ курс переплевывает многие платные. Спасибо, удачи тебе!
Респект вам за ваш труд!) Ваши шпаргалки очень нужны начинающим. С ними обучение еще более структурировано, а это очень важно когда приходится осваивать большое количество информации
Очень крутая шпаргалка, спасибо!
Рад что полезно!
Офигенно все объяснил. Заморочился с методичкой. Еще и инфо заполнил, я например печатаю и учу теги). Жека сам по себе приятный, супер харизма. Но 7 дизлайков. Кто эти люди? Люди ли они вообще?
Спасибо!
Редко пишу большие комментарии под видео, но вы правда спаситель и замечательный учитель. Еще со школы нравилась верстка, но из за подготовки к экзаменам бросил эту затею. Сейчас в университете и появилось время заниматься тем, что нравится. Вы смогли через экран изменить мое отношение к работе и обучению в положительное русло. Особенно фраза с первого ролика - работать в свободное время. Вроде бы обычная фраза, но я предал ей огромное значение. Домашку делаю без avacode (жалко, что блокнули), но даже так благодаря вам. Я вижу свои первые результаты, стал больше вникать и понимать. Вы даете много качественной информации понятным языком для людей, которые не могут позволить себе курсы (как я), огромное вам человеческое спасибо
Уроки проведены просто БЕСПОДОБНО! Все очень понятно и прозрачно, все, буквально, разложено по полочкам!!! Короче, полный восторг! Жаль, что смотрю это с опозданием на год. Но вот только сейчас увлеклась версткой! Огромнейшее СПАСИБО!!!
Это нереально круто, спасибо за ваш труд.!
Пожалуйста!
Привет, можешь скинуть домашку ? И ещё домашку седьмого урока?
Эм, ещё ни разу не встречал человека, который так заморачивается при обучении людей. Респект👍🏽
Спасибо! Стараюсь!
Фрилансер по жизни - IT и фриланс ждём JS, Jquery не в счёт 😂👍🏽
Спасибо Вам, со страхом начинала учится верстке, но благодаря таким чудесными урокам, проснулось вдохновение!