CSS3 #14 Фон (Background)

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ม.ค. 2025

ความคิดเห็น • 76

  • @ДмитрийПрошко-т7к
    @ДмитрийПрошко-т7к 2 ปีที่แล้ว +4

    Это просто шикарно, всё ясно на из. Спасибо тебе большое.

  • @olehyefimenko6693
    @olehyefimenko6693 2 ปีที่แล้ว +6

    Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

  • @Самир-ъ9е
    @Самир-ъ9е 2 ปีที่แล้ว

    сидел за пк 4 часа, и не кто не объяснил лучше тебя...Спасибо большое!

  • @DinozavrikDoDo
    @DinozavrikDoDo 4 ปีที่แล้ว +1

    Очень приятно учиться!

  • @Infinity-jh1jv
    @Infinity-jh1jv 4 ปีที่แล้ว +1

    Это то что мне нужно было! Хорош

  • @JavaScriptcher
    @JavaScriptcher 2 ปีที่แล้ว

    Вот теперь разобрался что это за штука такая background!!Спасибо!🧙‍♂️

  • @kotofun
    @kotofun 2 ปีที่แล้ว

    Полезный урок! Спасибо автору! ))

  • @eugenia9999
    @eugenia9999 4 ปีที่แล้ว +1

    как всегда все четко и полезно !!)) спасибо !!)) 😎👍

  • @NatureNeedsPurity
    @NatureNeedsPurity ปีที่แล้ว

    Just what I needed, disciplined teaching and leaving almost no questions, except, why did you leave out background-size, in the background property, is size addable and also does the order matter?

  • @polskolg
    @polskolg 4 ปีที่แล้ว

    Спасибо за отличный урок)

  • @liviivi
    @liviivi 2 ปีที่แล้ว +1

    Background не включает в себя background-size, правильно? Размер нужно будет отдельно указывать?

  • @ежемесячные
    @ежемесячные 2 หลายเดือนก่อน

    спасибо, удачи тебе

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 หลายเดือนก่อน

      Спасибо большое

  • @ЕвгенийУгланов-ш2л
    @ЕвгенийУгланов-ш2л 4 ปีที่แล้ว

    спасибо за большой труд!

  • @СергейАртемчук-ф5л
    @СергейАртемчук-ф5л 4 ปีที่แล้ว

    Шустро и внятно спасибо!

  • @MrMakaron4ik
    @MrMakaron4ik 4 ปีที่แล้ว

    Спасибо за труд!!!!

  • @den_sh_dev
    @den_sh_dev 2 ปีที่แล้ว

    Женя, как всегда супер уроки!
    я так понимаю, что без прописания min height и width, вставить картинку/фон, через background url не получится, всмысле, что она не отображается, это обязательно прописывать, верно?
    можно и так прописать:
    * {
    width 100%
    height 100%
    }
    Но как будет лучше ? это же будут наследовать все блоки получается

    • @YauhenKavalchuk
      @YauhenKavalchuk  2 ปีที่แล้ว +1

      Не обязательно вешать на все тэги через звёздочку, можно просто специфицировать конкретный тэг, типо main

    • @den_sh_dev
      @den_sh_dev 2 ปีที่แล้ว

      @@YauhenKavalchuk понял, но получается, что без прописи ширины и высоты , ты не вставишь bg image url именно в div ,а в боди вставляется, всмысле отображается.
      НО вот когда, я вставил bg image url, после пытаюсь bg position применить(параметры указаны верно center center), а она не сдвигается....в чем ошибка ???
      и стоит ли лучше указывать бэкграунд картинку через img src?

  • @Агент007-л8л
    @Агент007-л8л 2 ปีที่แล้ว

    Спасибо за интересные уроки👍 У меня такой вопрос, точнее 2 вопроса: 1) есть картинка на заднем фоне и на нем есть заголовок слева и кнопка справа. Как сделать так, чтобы яркость только картинки сделать темной, а яркость кнопки и заголовка оставить как есть? Я делаю через filter и в итоге они все меняются. Заголовок и кнопка находятся внутри разных div-ов и все поле обернуто в общий div, внутри которого и указаны background-image: url(), т.е. картинка.
    2) Часто при работе с картинками возникает такая проблема, что добавляешь картинку и она не полностью отображается, т.е. нижняя часть идёт вниз и не видна. Скажи, пожалуйста, как сделать так, чтобы картинка оставалась на всю ширину и высоту нужного блока и при этом как-бы отдалилась от нас, чтобы все разделы были видны. Надеюсь, смог правильно донестти мысль)) Буду очень благодарен🙏

  • @ArtyomKrymskiy
    @ArtyomKrymskiy 2 ปีที่แล้ว

    А можно исправить то, что картинка съезжает внутри контейнера по оси-Х при изменении масштаба страницы? Мне нужно, чтобы она была в определённом месте на странице.
    У меня сейчас "background: url(/img/woman_bg.png) 0% bottom no-repeat;"
    Заранее спасибо) И спасибо за урок!

  • @Кои_Рыбное_Филе
    @Кои_Рыбное_Филе 11 หลายเดือนก่อน

    Если ограничения на размер фона? Я использую background - image: url("ссылка на изображение 2000на3600");
    Фон не прогружается, не понимаю почему, подскажите пожалуйста

    • @YauhenKavalchuk
      @YauhenKavalchuk  11 หลายเดือนก่อน

      Не видя код, трудно что-то подсказать. Посмотрите в консоли - может проблема с путём

  • @N1enlin
    @N1enlin ปีที่แล้ว

    Привет из 2024 года. Появился вопрос: вот я добавил нужное мне изображение на сайт, но он рисует его просто с белым фоном. На сайте присутствует фон, само изображение без фона, только нужная надпись. Что делать?

    • @YauhenKavalchuk
      @YauhenKavalchuk  ปีที่แล้ว

      Без кода трудно помочь (

  • @ИВанДеркач-ъ3п
    @ИВанДеркач-ъ3п 3 ปีที่แล้ว

    Добрый день, а как, допустим, управлять размерами двух разных картинок? background-size в общем применяется для обеих картинок. А если каждую в частности нужно изменить? В 5 применяемых атрибутов background, нет контроля размера. Спасибо

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +1

      Добавлять уникальный класс для каждой обёртки и добавлять стили базируясь на классе

  • @Oktan241
    @Oktan241 3 ปีที่แล้ว

    а если мы все пишем в одном Background, то порядок написания свойств имеет значение? и второй вопрос - Z index будет работать для смены уровней отображения изображений, или только изменением порядка написания это регулируется?

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +2

      z-index применяется к элементам и никак не влияет на порядок отображения фона внутри них. Другое дело если для каждого элемента вы зададите собственный фон и будете один "поднимать" над другим

  • @Чегеварка
    @Чегеварка 3 ปีที่แล้ว

    У меня вопрос. Можно ли сделать так, что бы одна картинка обтекала другую. Т.е. о чём речь. Пример по аналогии с американским флагом. Слева сверху идёт одна картинка маленького размера снизу справа вставляем маленькую картинку звезды и включаем повторение:
    background: url(300x300.png) top left no-repeat, url(zvezda60x60.png) bottom right;
    Получается. Но звёзды заходит под первую. А можно сделать так чтобы они были на одном уровне, звёзды доходят до 1 картинки и останавливаются, а не торчать из под неё ?
    Надеюсь понятно изложил.

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว

      Ох, обычно эти делается по другому. Используются псевдоэлемены и дополнительные элементы в разметке. Чисто фоном это будет сделать проблематично

  • @earnlem
    @earnlem 3 ปีที่แล้ว

    Есть карусель из блоков, в каждом изображение и текст (подпись) на самой картинке. Знаю только два варианта: 1) bg img для блока, 2) использовать абсолютное позиционирование. Что лучше? И может быть есть ссылка на ресурс с подробным разбором?

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +1

      Обычно, используют 2-й вариант. Только дополнительно на back-end создают функциональность возврата нескольких картинок

  • @makemycake3617
    @makemycake3617 3 ปีที่แล้ว

    спасибо!!! со вчерашнего дня появилось куча рекламы... просто куча. до этого все было ок. так должно быть?

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว

      Понятия не имею что произошло, со своей стороны никаких изменений не вносил

  • @hesi7234
    @hesi7234 หลายเดือนก่อน

    Ну написал все цвет в цвет. Не работает

  • @NeoJohnSmit
    @NeoJohnSmit 4 ปีที่แล้ว

    Thank you bro!

  • @povargame6217
    @povargame6217 ปีที่แล้ว

    У меня не работает ключевое слово cover, фото всё равно обрезанное как и раньше

  • @nouchance
    @nouchance 4 ปีที่แล้ว

    Спасибо))

  • @maryanaliakh7359
    @maryanaliakh7359 ปีที่แล้ว

    как сделать четкий фон, у меня он немного в пикселях?

    • @YauhenKavalchuk
      @YauhenKavalchuk  ปีที่แล้ว

      Видимо картинка плохого качества. CSS этим не управляет

  • @baytszy
    @baytszy 3 ปีที่แล้ว

    а как фоновое изображение разместить фоном на всю стр но чтобы скролл не появился...

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว +1

      Это уже зависит не от фонового изображения, а от высоты элемента на который вы его вешает. Что бы растянуть его на всю высоту, добавляют min-height: 100vh;

    • @baytszy
      @baytszy 3 ปีที่แล้ว

      @@YauhenKavalchuk спасибо))))

  • @sabrinatoktorbaeva8749
    @sabrinatoktorbaeva8749 ปีที่แล้ว

    Какая тема у вас стоит? Как называется

    • @YauhenKavalchuk
      @YauhenKavalchuk  ปีที่แล้ว

      Если мне не изменяет память material gecko

  • @1MrAnonymous11
    @1MrAnonymous11 3 ปีที่แล้ว

    Код читается сверху в низ и по идеи лес должен был перекрыть картину css.

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว

      Здесь не про то как читается документ, а про то в каком порядке свойство применяет фон

    • @1MrAnonymous11
      @1MrAnonymous11 3 ปีที่แล้ว

      @@YauhenKavalchuk понял спасибо

  • @ВікторПінчук123
    @ВікторПінчук123 ปีที่แล้ว

    Обьясните мне кто-нибудь в этом мире, почему не подключается локальная фоновая картинка

    • @YauhenKavalchuk
      @YauhenKavalchuk  ปีที่แล้ว

      Проверьте пути, имя файла и расширение. Один из этих трёх параметров не верный

    • @ВікторПінчук123
      @ВікторПінчук123 ปีที่แล้ว

      @@YauhenKavalchuk Там все было верно, просто css хотел чтобы я прописал ../

  • @mmax487
    @mmax487 4 ปีที่แล้ว

    есть вк для связи немогу попрасту фон поставить банальный хотя css подключен и он работает тк на нём сделал 3d кнопки поомги пожалуйста

    • @YauhenKavalchuk
      @YauhenKavalchuk  3 ปีที่แล้ว

      в описании есть елки на соц.сети

    • @mmax487
      @mmax487 3 ปีที่แล้ว

      @@YauhenKavalchuk щяс посмотрю

  • @Павел-ь2с5т
    @Павел-ь2с5т 8 หลายเดือนก่อน

    У меня не работает url

    • @YauhenKavalchuk
      @YauhenKavalchuk  8 หลายเดือนก่อน

      Значит не верно определили путь

  • @TEMFOR_KINO
    @TEMFOR_KINO 2 หลายเดือนก่อน

    Thank

  • @maksRnik
    @maksRnik 2 ปีที่แล้ว

    и этот посмотрел. все понятно. всё записал 💾