Почему не ставится фон картинкой css

Не ставится фон, свойство Background-image не работает

Архив с файлами тутвведите сюда описание изображенияХотел поставить фон в header но Background-image почему то не работает, путь указал правильно пробовал фон в туже папку скинуть, что и CSS с HTML. Но ничего не работает

Не знаю уже что делать

Вы написали параметры вне стиля background:url(images/header-bg.jpg); center center no-repeat; Поправьте так

После просмотра вашего файла сразу видна причина проблем, вы написали стили не закрыв коментирующую линию! у вас написанно в css

вы не закрыли коментарий */ должно быть так /* ————— /áàçîâûå íàñòðîéêè ———*/ и не написали к какому элементу стили, надо так

background-image

Свойство background-image задаёт фоновую картинку элемента.

Пример

Как это понять

Таких картинок можно разместить сколько угодно. Они будут накладываться друг на друга, причём сверху будет видна та, что указана в списке первой. Если она не прогрузится, то пользователь увидит следующую по порядку.

Элементу можно задать одновременно и цвет фона background-color , и фоновую картинку. Если картинка не прогрузится, то вместо неё пользователь увидит фоновый цвет.

Как пишется

Адрес картинки важно задать внутри url(". "); .

Границы картинки и её расположение, относительно краёв элемента мы задаём с помощью background-clip и background-origin .

Значения

  • url — адрес картинки, который пишется в скобках и кавычках: url("cat_box.png") .
  • none — добавьте его, чтобы фоновая картинка не появлялась (значение по умолчанию).

Подсказки

💡 Разные браузеры могут отображать фоновый рисунок по-разному. Например, если ты задаёшь фоновую картинку внутри таблицы для одной строки целиком, то Chrome и Safari продублируют эту картинку в каждой ячейке, когда остальные растянут картинку на всю строку.

💡 С помощью background-image также можно сделать градиентный фон, задав разные цвета:

Подробнее о градиентах можно прочитать в статьях о linear-gradient и radial-gradient .

Пример

Добавим на фон сразу цвет и картинку. Цветной фон появится сразу — браузер делает это моментально, потому что ничего загружать не надо. А вот картинка может грузиться какое-то время, в зависимости от скорости интернета:

Чтобы фоновая картинка отображалась так, как нужно, задайте ей параметры с помощью других свойств:

Если хочется наложить одну картинку на другую, то просто перечисляем их через запятую. Первое изображение в списке окажется сверху. Вторую картинку будет видно, если у первой будет прозрачный фон:

На практике

Дока Дог

&#128736; backgroung-image хорош тем, что при правильном сочетании с background-size может встроить фоновую картинку как угодно. Получается порой более гибко, чем обычный <img> , но не стоит увлекаться этим тегом: поисковик тебе за это спасибо не скажет.

Имеет смысл ставить картинку как фон только тогда, когда изображение является декоративным.

Егор Левченко

&#128736; Стоит понимать разницу между <div> с фоновой картинкой и, собственно, картинкой <img> . У картинки можно указывать только один параметр размера: высоту или ширину, и браузер сам рассчитает второй. У блока с фоном, внутри которого нет контента, надо указывать оба параметра.

Так происходит потому, что картинка <img> — это контент, под который будут подстраиваться элементы вокруг и блок-родитель, а фоновое изображение у <div> — это простой декоративный элемент.

Это важно помнить, когда вам нужно будет работать с адаптивностью.

Алёна Батицкая

&#128736; Если задаём фоновую картинку для блока с текстом, то обязательно задаём и фоновый цвет.

Почему это важно: если при загрузке страницы картинка будет долго загружаться или вообще не загрузится, то белый текст будет совершенно не виден. Пользователь потеряет контекст и, вероятнее всего, интерес к вашей странице.

Пример ниже не пустой, но в нём не загрузилась фоновая картинка:

Демка будет наглядной, если на сайте включить светлую тему ☀️

Чиним одной строкой:

Да, будет не так красиво, как нарисовал дизайнер, но вся информация будет доступна.

&#128736; Кроме линейного градиента можно задавать радиальный — круглый — градиент. Для этого нужно написать следующее:

Что такое CSS: объясняем простыми словами

Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.

Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.

Со временем этих возможностей стало мало — и появилась технология форматирования без изменения самого содержимого и структуры документа. CSS решил проблему «зоопарка» тегов форматирования, когда разные браузеры поддерживали разные теги. Их унификация и единая база упростили работу с веб-документами и облегчили жизнь веб-мастерам.

CSS и стили

CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:

  • теги не дублируются;
  • документ проще обслуживать;
  • внешний вид всего сайта можно изменить централизованно, а не корректировать форматирование каждой странички.

Стили можно разметить внутри тега <HEAD> или использовать отдельный CSS-файл.

Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:

А так CSS прописывается при помощи тега <style> и в теге <head> документа HTML.

Теперь разберёмся, что такое CSS-файл. Всё просто — это файл с расширением .css, где прописываются правила оформления документа. Чтобы привязать файл к оформлению страницы, нужно использовать тег <link>:

Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде <div >, то сейчас всё это выполняется средствами CSS.

После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда.

Синтаксис CSS

У языка CSS относительно простой синтаксис. Сначала прописывается селектор — он выбирает конкретный элемент на странице. Потом, после фигурных скобок, указываются свойства со значениями — между ними ставится двоеточие. Сами свойства отделяются друг от друга точкой с запятой.

Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:

В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.

Каскады в CSS

И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:

При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:

Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:

Чтобы использовать все параметры, в HTML указываем:

Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:

  1. Селектор типа элемента (p).
  2. Селектор класса (.important).
  3. Селектор id (#intro).

1 — низкий приоритет, 3 — высокий.

Приоритеты в CSS

Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:

  1. Самый высокий приоритет у свойств, в конце объявления которых указано !important.
  2. Затем идут инлайновые стили, которые прописываются в теге через атрибут style.
  3. Ещё ниже приоритет стилей, заданных в теге style в самом документе.
  4. Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега <link>

Методологии CSS

Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код.

Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.

Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.

Будущее CSS

CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3.

Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.

Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *