Как сделать так чтобы фон не прокручивался html
Обновлено: 02.07.2024
Свойства фона CSS используются для определения фоновых эффектов для элементов.
Свойства фона CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Цвет фона
Свойство background-color задает цвет фона элемента.
Цвет фона страницы задается так:
Пример
С помощью CSS цвет чаще всего задается:
Посмотрите на значения цвета CSS для полного списка возможных значений цвета.
В приведенном ниже примере элементы
Пример
div background-color: lightblue;
>
p background-color: yellow;
>
Фоновое изображение
Свойство background-image указывает изображение, используемое в качестве фона элемента.
По умолчанию изображение повторяется так, чтобы оно охватывало весь элемент.
Фоновое изображение для страницы можно задать так:
Пример
Ниже приведен пример плохого сочетания текста и фонового изображения. Текст вряд ли читается:
Пример
Примечание: При использовании фонового изображения используйте изображение, которое не нарушает текст.
Фоновое изображение-повторить горизонтально или вертикально
По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения должны повторяться только по горизонтали или вертикали, или они будут выглядеть странно, как это:
Пример
Если изображение выше повторяется только горизонтально ( background-repeat: repeat-x; ), фон будет выглядеть лучше:
Пример
Совет: Чтобы повторить изображение вертикально, установите background-repeat: repeat-y;
Фоновое изображение-установить положение и не повторять
Отображение фонового изображения только один раз также задается свойством background-repeat :
Пример
В приведенном выше примере фоновое изображение отображается в том же месте, что и текст. Мы хотим изменить положение изображения, так что он не нарушает текст слишком много.
Положение изображения задается свойством background-position :
Пример
body <
background-image: url("img_tree.jpg");
background-repeat: no-repeat;
background-position: right top;
>
Фоновое изображение-фиксированное положение
Чтобы указать, что фоновое изображение должно быть исправлено (не будет прокручиваться вместе с остальной частью страницы), используйте свойство background-attachment :
Пример
body <
background-image: url("img_tree.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
>
Фон-Сокращенное свойство
Чтобы сократить код, можно также указать все свойства фона в одном свойстве. Это называется сокращенным свойством.
Сокращенное свойство для фона — background :
Пример
При использовании сокращенного свойства порядок значений свойств:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Это не имеет значения, если одно из значений свойства отсутствует, до тех пор, пока другие из них в этом порядке.
эта возможность позволяет фиксировать изображение при прокрутке окна браузера. Данное изображение всегда остается на месте, где оно было зафиксировано и используется это для вкладок блога, службы поддержки, социальных кнопок и т.д.
Так вот, наша сегодняшняя задача сделать такую же фишку. Как разместить данное изображение (всегда предварительно оптимизируйте изображения перед загрузкой) в определенном месте мы уже знаем, но как заставить его зафиксироваться?! Давайте приступим и попробуем это сделать, как на данном скрине.
Теперь давайте разберемся куда мы можем поставить данное фоновое изображение. У нашего тега body, а также у блока div и Н1 уже есть фоновые картинки, а как мы знаем 2 изображения поставить нельзя (смотрите прошлые уроки). Но все очень просто: мы можем создать еще бесчисленное количество блоков div с другими идентификаторами внутри тега body, на фон которого поставить изображение. Для удобства в написании можно использовать аналогичный сдвиг строк, чтобы видеть где какой блок начинается и заканчивается, а также какой блок внутри другого.
Теперь давайте пропишем outline нашему новому блоку, чтобы видеть его границы. По окончанию работы это свойство можно просто удалить.
Вот появился наш блок, который по вертикали занял расстояние равное высоте контента, а по горизонтали все свободное пространство тега body. Но мы не можем проверить нашу работу, так как для этого мы должны прокрутить страницу браузера, а такой возможности пока у нас нет. Для этого давайте увеличим размер нашего блока с 421px до 991px, чтобы появилась полоса прокрутки.
И теперь, когда появилась полоса прокрутки мы на фон нашего блока div ставим это изображение. Запрещаем повторение и указываем положение.
Теперь если обновить браузер появилось наше изображение, но при прокрутке окна оно зафиксировано на месте и не прокручивается вместе с окном. Для этого нам необходимо прописать новое свойство, которое закрепит изображение относительно окна браузера.
Теперь при прокрутке окна, наш логотип с телефонами остается на месте относительно окна браузера, что очень часто используется при дизайне кнопок "службы поддержки", ссылки на блог или панели с социальными кнопками.
Ну и в конце нашего занятия давайте вновь сократим наши свойства уместив все в одну строчку. Мы просто пишем общее свойство background и далее просто перечисляем в строчку все его значения! Все просто!
Например, если вы использовали картину в фоновом режиме, то обычно изображение по умолчанию должно прокручиваться с помощью страницы и также, что в ней будет, а точнее содержимое, но если вы установите это свойство на фиксированное изображение, то останется в том же положении.
Например, изображение на фоне применяемое к длинной странице, для того, чтоб корректно была прокрутка остальной части страницы. Однако, если применяется фиксированное значение background-attachment, изображение будет оставаться в том же положении, в котором пользователь будет прокручивать страницу вверх и вниз.
Вы также можете ссылаться на приведенный ниже синтаксис, что можете настроить это свойство в разных вариациях.
Это ключевое слово означает, что фон фиксируется в относительной области просмотра. Даже если элемент имеет механизм прокрутки, фиксированная фон не двигается с элементом.
Это ключевое слово означает, что фон закреплен в отношении элемента содержание, если элемент имеет прокрутку, механизм, фон прокручивается вместе с его содержимым элемента, где фон позиционирования региона относительно прокручиваемого свойство.
Это ключевое слово означает, что фон фиксируется в отношении к самому элементу и не прокручивается с его содержанием. Это будет эффективно к присоединенные к элементу границы.
Поддержка браузера:
Значения fixed и scroll значения поддерживаются повсюду, хотя fixed могут вести себя странно на мобильных устройствах, что local имеет поддержку этого браузера.
Синтаксис фоновой привязки:
background-attachment: scroll; /* It will scroll along with the element (default )*/
background-attachment: fixed; /* It will fix the background image */
background-attachment: local; /* The background scrolls along with the element's contents */
background-attachment: initial; /* Sets this property to its default value */
background-attachment: inherit; /* Inherits this property from its parent element */
Ниже приведен CSS файл, в котором мы установили атрибут свойства background-attachment в fixed.
HTML: Контент на странице
Переключатель Nintendo был взломан и способен загружать Linux в новый эксплойт с холодной загрузкой.
В прошлом квартале общий доход составил 1,23 млрд. Долл. США, из которых 787 млн. Долл. США приходится на живые службы.
Когда разработчики игр обсуждают свои самые большие влияния, любимый титул PS2 Shadow of the Colossus обязательно появится
Также можно посмотреть, как примерно все выглядит, но здесь веб мастер ставит сам изображение как в тематическом направление, так и можно выставить, чтоб на нем были знаки для чтение.
Как вы видели в демонстрации, что изображение фиксировано в определенном месте, то есть в верхнем левом углу экрана, а остальная часть содержимого прокручивается. Помните, что эффект прокрутки будет вызывать только в зависимости от длины содержимого.
Здесь изменили изображение и сделали его на всю ширину, но также и и светлым шрифт сделали.
Второй вариант:
Здесь идет изображение по левую сторону, где по умолчанию будет до конца страницы. Будет предоставлено demo, где посмотрите, как все будет в реальности. Здесь простые звездочки, которые сильно по своей палитре не заметны. Что нужно понять, если поставить яркий снимок. что совершено по другому смотреться будет.
p <
background-image: url("http://zornet.ru/Aben/ABGDA/zornet_ru/starsolid.jpg"), url("http://zornet.ru/Aben/ABGDA/zornet_ru/startransparent.jpg");
background-attachment: fixed, scroll;
background-repeat: no-repeat, repeat-y;
>
Здесь ваше описание, это может быть статья или материал
Так же нужно знать, что фоновое прикрепление, это картинка или снимок, также может быть указан как часть background сокращенного имущества.
Таким образом, вы можете поместить изображения на фон, которые можно сделать фиксированными или прокручивать по содержанию.
Если же вы впервые слышите о каскадных таблицах стилей, то предлагаю вам для начала ознакомиться со статьей о том, что такое css и как их подключить к html документу.
Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:
- background-color — задает цвет фона для любого Html элемента;
- background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
- background-repeat — параметр повторения фоновой картинки;
- background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
- background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.
Далее рассмотрим подробнее каждое свойство.
Background-color и background-image
Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.
Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:
background-color: transparent| |inherit
Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.
Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:
У этого абзаца черный фон и белый текст
Либо так в коде CSS файла:
У этого абзаца черный фон и белый текст
Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:
По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.
А вот оригинальный вид фонового изображения:
Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.
Как вы могли заметить из примера, если фоновое изображение меньше, чем элемент страницы, для которого оно задано, то картинка повторяется по вертикали и горизонтали пока не замостит собой весь элемент. Параметры этого повторения задает следующий элемент.
Background-repeat — параметры повторения фонового изображения
Свойство background-repeat может принимать следующие значения:
no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.
В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.
repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.
repeat-x - фоновое изображение будет повторяться только по горизонтали. Пример:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.
repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.
Позиционирование фона с помощью background-position
Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:
Горизонтальная позиция может принимать следующие значения:
В качестве числовых значений могут использоваться как абсолютные (например px), так и относительные величины (например проценты) и они указывают местоположение фонового изображения в элементе по горизонтали.
- left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру элемента;
- right — фон прижимается к правому краю элемента.
Вертикальная позиция может иметь следующие значения:
Числовое значение указывает местоположение фонового изображения по вертикали и задается абсолютными или относительными единицами измерения.
- top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру;
- bottom — фон прижимается к нижнему краю.
В случае использования ключевых слов для задания вертикальной и горизонтальной позиции, то порядок их следования не имеет значения. Если же, например, использовать пиксели или процентную запись, то сначало задается положение фонового рисунка по горизонтали, а затем, через пробел, положение по вертикали.
Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:
Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.
То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:
Вообще соотношение между ключевыми словами и процентной записью следующее:
- top left = left top = 0% 0% (выравнивание по левому верхнему углу)
- top = top center = center top = 50% 0% (вверху по центру)
- right top = top right = 100% 0% (по правому верхнему углу)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- center = center center = 50% 50% (по центру)
- right = right center = center right = 100% 50% (по правому краю и по центру)
- bottom left = left bottom = 0% 100% (по левому нижнему углу)
- bottom = bottom center = center bottom = 50% 100% (внизу по центру)
- bottom right = right bottom = 100% 100% (по правому нижнему углу)
На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по X, а вторая по Y. А ключевые слова хоть и кажутся более понятными, но могут стоять в различной последовательности и это может ввести в заблуждение.
Фиксация фона background-attachment
По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:
scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.
Обычно фиксируют фоновый рисунок заданный для все веб страницы, а для отдельных элементов оставляют прокручивающийся фон.
Сборное правило background
Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.
Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:
А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:
Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!
Читайте также: