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

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

  • автор:

Фон блока в CSS

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

Цвет фона блока

Свойство background-color устанавливает цвет фона. В значении указывается цвет одним из способов, существующих в CSS. Кроме того, свойство принимает такие значения:

background-color: transparent — прозрачный фон (по умолчанию)

background-color: inherit — значение принимается от родительского элемента

Значение transparent используется в CSS, когда нужно вернуть прозрачный фон блоку, если ранее он уже был изменён.

Создадим блок, зададим ему размеры и установим цвет фона.

#div1

Блок с фоном

Область заполнения фона

Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip . Оно принимает такие значения:

background-clip: border-box — весь блок вместе с рамкой (по умолчанию)

background-clip: padding-box — весь блок без рамки

background-clip: content-box — фон заполняет только область содержимого

padding-box
content-box

При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.

Добавим на страницу блок, зададим ему рамку и внутренние отступы. Установим фон, заполняющий только содержимое блока:

13
14
15
16
17
18
19
#div2

Фон заполняет только контент

Фон в виде картинки

В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image . Значением этого свойства является путь к файлу картинки. Он указывается так:

background-image: url(«путь к файлу»);

Для примера можно использовать это изображение. Нажмите на него правой кнопкой мыши и сохраните с именем image. Разместите файл в той же папке, где находится страница. Иначе путь к файлу нужно указывать не так, как в примере.

Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

20
21
22
23
24
25
#div3

Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.

Размер фоновой картинки

Свойство background-size устанавливает размеры фоновой картинки. Оно определяет не размер фона, а именно размер изображения. Размеры фона зависят от размеров блока. А свойство background-size влияет на картину, которая становится фоном. Значение свойства можно указать в единицах измерения CSS или процентах. Сначала пишется ширина и через пробел высота. Если не соблюсти пропорции ширины и высоты, то изображение искажается.

Также у свойства background-size есть такие значения:

background-size: auto — если указано только это значение, то изображение имеет свои реальные размеры. Если один из размеров задан в единицах измерения, то второму размеру можно указать auto , чтобы у картинки были правильные пропорции.

background-size: cover — картинка заполняет весь фон, сохраняя пропорции.

background-size: contain — вся картинка отображается в фоне.

Значения cover и contain есть также у свойства object-fit . В теме про него эти значения рассмотрены более подробно.

Укажем размер фоновой картинке:

background-size: 480px 280px;

Позиционирование изображения

В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position . В значении пишутся два слова через пробел.

Первое слово — это горизонтальное позиционирование. Значение может быть left , center или right .

Второе слово — это вертикальное позиционирование. Значение может быть top , center или bottom .

Расположим изображение справа сверху.

background-position: right top;

Повторение изображения

Добавим на страницу ещё один блок и установим фон в виде того же изображения. Но теперь размеры блока будут намного больше размеров картинки. Пока мы не будем ничего менять, чтобы посмотреть, как выглядит блок. Вы увидите, что изображение повторяется для полного заполнения блока. Добавим блоку рамку, чтобы видеть его размеры.

27
28
29
30
31
32
33
#div4

Чтобы изменить повторение изображения, используется свойство background-repeat . Оно принимает такие значения:

background-repeat: repeat — повторяется по горизонтали и по вертикали (по умолчанию)

background-repeat: repeat-x — повторяется только по горизонтали

background-repeat: repeat-y — повторяется только по вертикали

background-repeat: no-repeat — не повторяется

background-repeat: inherit — значение принимается от родительского элемента

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

background-repeat: no-repeat;

В такой ситуации тоже можно использовать позиционирование изображения. Значением свойства background-position могут быть не только слова, но и два числа в единицах измерения CSS, указанные через пробел. Это отступы изображения от левого верхнего угла блока.

Попробуйте разные способы повторения изображения.

Прокрутка фона

Есть возможность установить, как будет двигаться фон блока при прокрутке страницы, а также при прокрутке самого блока. Это делается с помощью свойства background-attachment . Оно может принимать такие значения:

background-attachment: scroll — фон не движется относительно блока и движется вместе с блоком при прокрутке страницы (по умолчанию)

background-attachment: fixed — фон зафиксирован относительно левого верхнего угла окна браузера

background-attachment: local — фон движется вместе с содержимым при прокрутке блока

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

Произвольный фон в теме WordPress.

Произвольный фон — это стандартная возможность WordPress, которая позволяет устанавливать в админке цвет или изображение фона сайта .

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

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

Шаг 1. add_theme_support() — подключаем необходимый интерфейс в админке.

Начиная с версии 3.4 в WordPress используется функция add_theme_support() для подключения произвольных фонов. В более старых версиях (от 3.0 до 3.4) использовалась другая функция, но сейчас она устарела и я её рассматривать не буду.

Вставляем следующий код в functions.php текущей темы:

add_theme_support( 'custom-background' );

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

function true_custom_background_support(){ add_theme_support( 'custom-background' ); } add_action('after_setup_theme', 'true_custom_background_support');

Прежде, чем продолжить, посмотрим, что у нас получилось:

Произвольный фон в WordPress.

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

$defaults = array( 'default-image' => '', // без изображения 'default-repeat' => 'repeat', // повторять 'default-position-x' => 'left', // выровнять по левому краю 'default-attachment' => 'scroll', // фон прокручивается со страницей 'default-color' => '', // без цвета 'wp-head-callback' => '_custom_background_cb', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); add_theme_support( 'custom-background', $defaults );

default-image URL изображения, которое следует установить в качестве изображения фона по умолчанию. Добавляется через CSS-свойство background-image . default-repeat Нужно ли повторять фон. То есть, если ширина или высота изображения меньше ширины или высоты страницы, то оно будет повторяться. CSS-свойство background-repeat . Может принимать значения:

  • no-repeat — не повторять,
  • repeat-x — повторять по горизонтали,
  • repeat-y — повторять по вертикали,
  • repeat — повторять во всех направлениях.
  • left — слева,
  • right — справа,
  • center — по центру.
  • scroll — изображение скроллится вместе со страницей,
  • fixed — изображение зафиксировано и не смещается при прокрутке.

Хорошо, давайте попробуем, я например сделаю вот так:

$defaults = array( 'default-color' => '#eeeeee', 'default-image' => get_stylesheet_directory_uri() . '/grand_canyon.jpg', 'default-repeat' => 'no-repeat', 'default-position-x' => 'center', 'default-attachment' => 'fixed' ); add_theme_support( 'custom-background', $defaults );

Функция get_stylesheet_directory_uri() в данном примере возвращает абсолютный URL текущей темы.

Ого, в админке появились дополнительные настройки:

Дополнительные настройки произвольного фона в WordPress.

Эти настройки также появятся и в первом примере, после того, как вы загрузите изображение для фона. Кстати, если после загрузки изображения, в блоке просмотра оно отображается в уменьшенном варианте, не волнуйтесь, на фон сайта всё равно добавится в полном размере.

Шаг 2. wp_head() и body_class() для добавления фона на страницы сайта.

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

    Убедитесь, что ваш header.php содержит функцию wp_head() — именно через эту функцию в тело документа будут вставляться CSS-стили. Например из предыдущего примера набор стилей будет следующий:

style type="text/css" style="color: #c1ef65;">"custom-background-css"> body.custom-background < background-color: #eeeeee; background-image: url('https://misha.agency/wp-content/themes/truemisha/grand_canyon.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; >style>
 body_class() ?>>

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

body style="color: #c1ef65;">"custom-background">

Смотрите также

  • add_theme_support() — добавляет поддержку: форматов постов, миниатюр, меню, HTML5, произвольного фона и заголовка
  • body_class() — выводит атрибут класс и его содержимое для страницы
  • wp_head() — хук для подключения CSS, JS, jQuery и добавления мета-тегов
  • get_stylesheet_directory_uri() — как узнать абсолютный URL папки с темой

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Как использовать CSS background-size и background-position

Со свойствами фона CSS можно сделать очень многое. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также изучим варианты позиционирования фонового изображения с помощью background-position .

Установка

Для демонстрации фонового изображения мы будем использовать следующее изображение (Ойя на Санторини, Греция). Его естественные размеры составляют 400px на 600px .

Ойя на Санторини, Греция

Вот наша базовая демонстрация CodePen с , центрированным в середине . (Подробнее о центрировании элементов с помощью CSS Grid вы можете прочитать здесь). Размеры div составляют 300px на 200px .

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

Если мы сейчас просто добавим изображение в качестве фона, то заметим, что видна только его часть. Это потому, что изображение шире и выше, чем div .

Изображение ниже даёт представление о тех частях фонового изображения, которые не видны за пределами div .

Видимые и невидимые части фонового изображения

Очевидно, что это не очень удовлетворительный результат, поэтому давайте посмотрим, как свойство background-size может нам помочь.

Установка размеров фона с помощью background-size

С годами появились новые свойства для работы с фоновыми изображениями в CSS, в том числе background-size . Оно позволяет задавать размер фонового изображения, как это всегда делалось со встроенными изображениями.

Свойство background-size предлагает на выбор два ключевых значения — cover и contain , а также может принимать числовые значения с такими единицами измерения, как px , em и % , наряду с auto . Давайте рассмотрим примеры каждого из них.

background-size: contain

Значение contain заставляет все изображение помещаться в его контейнер, даже если его естественные размеры больше, чем контейнер.

В данном примере мы добавили следующий CSS:

div  
background-size: contain;
background-repeat: no-repeat;
>

По умолчанию фоновое изображение будет повторяться столько раз, сколько необходимо для заполнения контейнера, поэтому background-repeat: no-repeat ; останавливает это поведение. (Попробуйте убрать этот параметр, чтобы увидеть повторяющееся изображение).

background-size: cover

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

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

По умолчанию левый верхний угол фонового изображения помещается в левый верхний угол div

Когда мы рассмотрим свойство background-position , мы узнаем, как указать, какая часть изображения будет видна.

background-size с другими значениями

Давайте посмотрим, какие ещё значения мы можем использовать со свойством background-size .

Если мы добавим одно процентное значение 50% , вот что произойдёт:

Фоновое изображение теперь составляет 50% ширины div , но все ещё выше div, поэтому нижняя часть изображения скрыта. Таким образом, к оси x применяется одно процентное значение. Ось y по умолчанию имеет значение auto , что означает, что изображение сохраняет естественное соотношение сторон.

Вот что произойдёт, если мы добавим два процентных значения ( 50% 50% ):

Ого! Теперь изображение занимает 50% ширины div и 50% высоты — это означает, что его соотношение сторон значительно искажено.

Мы получим похожие результаты, если заменим % на px или другие единицы измерения. Например, мы можем сделать что-то вроде background-size: 50px 50px , или background-size: 200px 3em и так далее. Мы можем поэкспериментировать с этими значениями в Pen выше… хотя этот подход редко будет полезен, потому что он будет искажать фоновое изображение, если мы тщательно не подберём значения, сохраняющие его соотношение сторон.

Гораздо более полезным для уточнения параметров фонового изображения является свойство background-position , поэтому рассмотрим его далее.

Установка положения фоновых изображений с помощью background-position

Выше мы видели, что по умолчанию левый верхний угол нашего фонового изображения помещается в левый верхний угол его контейнера. То есть, настройка background-position по умолчанию выглядит следующим образом:

div  
background-position: left top; /* или 0 0 и т.д. */
>

Свойство background-position даёт нам большой контроль над тем, где будет размещено наше фоновое изображение, и оно очень хорошо работает в сочетании с background-size: cover , поэтому мы будем использовать их вместе в следующей паре примеров.

Использование background-position с ключевыми словами

На нашем примере изображения много голубого неба слева вверху, поэтому давайте вместо этого расположим его справа внизу:

div  
background-size: cover;
background-position: right bottom;
>

В дополнение к различным комбинациям верхнего, нижнего, левого и правого, существует также center , который прекрасно центрирует изображение. (Попробуйте заменить background-position: right bottom; на background-position: center; в Pen выше).

Использование background-position со значениями длины

Мы можем позиционировать наше фоновое изображение с помощью таких значений длины, как пиксели и em . Это позволяет нам отодвигать и притягивать изображение от краёв контейнера. Например:

div  
background-size: cover;
background-position: 20px 2em;
>

Здесь изображение задано так, чтобы покрыть контейнер, но затем оно отодвигается на 20px от левой части контейнера и на 2em от верхней.

Значения длины можно комбинировать со значениями ключевых слов. Например, bottom 20px right 2em перемещает изображение на 20px снизу и 2em справа.

Мы также можем использовать отрицательные значения, чтобы ещё больше подтолкнуть и вытянуть наше фоновое изображение в нужное положение.

Использование background-position с процентными значениями

Использование процентных значений background-position даёт нам большой контроль над позиционированием изображения, но это может быть немного сложно для понимания. В данной демонстрации мы уберём размер фона и будем работать с естественными размерами изображения:

div  
background-position: 50% 50%;
>

Так что же означает 50% ? 50% от чего? Это означает, что отметка 50% изображения совпадает с отметкой 50% контейнера. То есть, если провести вертикальную и горизонтальную линии через центр изображения и центр контейнера, то эти линии совпадут, как показано на рисунке ниже.

Вертикальные и горизонтальные линии через центр изображения и контейнера

Если мы установим background-position в 20% 40% , это означает, что вертикальная линия 20% слева от изображения соответствует вертикальной линии 20% слева от коробки контейнера, а горизонтальная линия 40% сверху от изображения соответствует вертикальной линии 40% сверху от коробки контейнера, как показано ниже.

background-position в 20% 40%

Заключение

Свойство background-size — действительно полезное дополнение к CSS, которое часто пригождается, особенно когда контейнеры меняют размер в отзывчивых макетах. Свойство background-position добавляет ещё больше возможностей, позволяя нам выбирать способ расположения фоновых изображений в контейнере.

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

Чтобы узнать больше, посетите страницы MDN, посвящённые этим свойствам:

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

Наконец, стоит сравнить свойства background-size и background-position для фоновых изображений со свойствами object-fit и object-position для встроенных изображений — ещё одним супер полезным дополнением к нашему набору инструментов CSS. Ознакомьтесь со статьёй Как использовать CSS object-fit и object-position , чтобы освоить их.

Фиксированный фон в секции

Фиксированный фон в секции

Данный эффект напоминает параллакс, но выполнен на CSS и всего одним классом.

Решение очень простое, но подойдет не для всех изображений, в примере на этот счет есть заметка.

Пример:

Обратите внимание, что фоновое изображение в каждом блоке встаривается в размер экрана браузера, а лишнее отрезается.

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

HTML:

CSS:

height : 520px ;
background-size : cover ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-position : center center ;
margin : 20px 0 ;

Для мобильного варианта можно отключить эту фиксацию и изменить высоту секции, добавив:

@media (max-width: 767px) < background-attachment : scroll ; height : 320px ; Нравится 15 В закладки

  • Опубликовано: 07.03.2022
  • Рубрики: Прокрутка и скроллбары, Секции
  • Метки: CSS
  • 4724 просмотра
Смотрите также:

Параллакс эффект simpleParallax

Параллакс эффект simpleParallax

Эффект параллакса накладываемый на теги изображений, а не на фон

Секция с падающим снегом на JS

Секция с падающим снегом на JS

Падающие в блоке или на всей странице снежинки, квадратики, треугольники и другие элементы

Секция с заголовком и фотографией

Секция с заголовком и фотографией

Красивое оформление секции с фотографией и заголовком, который частично заполнен ей

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

Ваш комментарий отправлен!

Комментарии:

Герман: 01.12.2022 в 15:41

Здравствуйте Александр.
Не нашел на вашем сайте тему как установить блок комментариев. Перебрал много вариантов из разных источников, не получается, чего-то я наверное недопонимаю. Не могли бы вы помочь ?

Герман: 22.11.2022 в 15:59

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

Alexander: 22.11.2022 в 16:17

Она так и работает.
Картинка идет во весь экран (что не умещается отрезается), а видно ее только в окне.
Соотв. если контейнер узкий, многое будет не видно.

Герман: 24.11.2022 в 10:33

Здравствуйте Александр. Большое спасибо, получилось. Но не совсем, как мне кажется. На смартфоне при прокрутке туда сюда и если пальцем верх вниз, картинка дергается. Брал ваши коды html и css, смотрел и добавлял по советам из сети, не получается, картинка в фикс-боксе дергается. Что это может быть? Если не трудно, посмотрите, вот ссылка https://assorty.site/. Может в css что не так?

Alexander: 24.11.2022 в 13:24

У меня нормально на телефоне, думаю зависит от него или от браузера.
Как вариант, это просто убрать этот эффект для него (в css выше есть пример)

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

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