Как сделать чтобы картинка не повторялась css
Перейти к содержимому

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

  • автор:

Как сделать, чтобы фон не повторялся?

Добавить фоновую картинку так, чтобы она не повторялась по горизонтали и вертикали.

Решение

Используйте свойство background со значением no-repeat для селектора body .

Описание

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всём поле веб-страницы. Однако такое поведение фона не всегда требуется, поэтому на помощь придёт значение no-repeat , добавляемое к стилевому свойству background .

Общий синтаксис в этом случае будет следующий.

 body 

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

Пример 1. Фон веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Фон   

Содержимое веб-страницы

Результат данного примера показан на рис. 1.

Фоновая картинка на веб-странице без повторения

Рис. 1. Фоновая картинка на веб-странице без повторения

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Свойство background-repeat

Свойство background-repeat задает каким образом повторять фоновую картинку элемента. По умолчанию картинка повторяется и по оси X, и по оси Y, таким образом покрывая собой всю доступную область.

Синтаксис

Значения

Значение Описание
no-repeat Картинка не будет повторяться вообще.
repeat-x Картинка будет повторяться по оси X.
repeat-y Картинка будет повторяться по оси Y.
repeat Картинка будет повторяться по оси X и по оси Y.
space Картинка повторится столько раз, чтобы полностью заполнить область, если это не удается, между картинками добавляется пустое пространство.
round Картинка повторится так, чтобы в области поместилось целое число рисунков, если это не удается сделать, то фоновые рисунки масштабируются.

Значение по умолчанию: repeat — покрывает узором весь экран.

Пример

По умолчанию фоновая картинка замостит собой весь элемент:

Пример

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

Пример

А теперь пусть картинка повторяется по оси X:

Background-repeat: повторение фоновой картинки

Если элементу задать свойство background-image , то фоновый рисунок будет по умолчанию повторяться в двух осях — по горизонтали (x) и по вертикали (y). Для примера возьмем небольшое изображение с бесшовным фоном:

И установим его в качестве фона для блока div :

Изображение дублируется по вертикали и горизонтали

В результате фон продублировался по горизонтальной и вертикальной оси, на всю ширину и высоту нашего блока (отметим, что размеры блока div мы указали заранее).

Свойство background-repeat

Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:

  • repeat — то же, что и значение по умолчанию — полностью заполняет элемент фоновым рисунком натурального размера, повторяя его сверху вниз и слева направо. Такой эффект хорошо смотрится только при правильном подборе фона, который в идеале должен быть бесшовным, не слишком ярким, малоконтрастным.
  • no-repeat — заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге). background-repeat: no-repeat
  • repeat-x — фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.). background-repeat: repeat-x
  • repeat-y — фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.). background-repeat: repeat-y

Эти значения поддерживаются всеми браузерами, включая IE6. Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):

  • round — фон повторяется так, чтобы в область элемента поместилось целое число изображений. Если это не удается сделать, фон автоматически подгоняется (масштабируется), чтобы соответствовать условию. background-repeat: round
  • space — работает так же, как и предыдущее свойство, но с одним отличием: если целое число изображений не помещается в область, рисунки не масштабируются, а между ними добавляется пространство. background-repeat: space

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

Как сделать, чтобы фон не повторялся?

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству background-repeat добавляется значение no-repeat , как показано в примере 1.

Пример 1. Фон веб-страницы

Здесь фоновая картинка выводится для всей веб-страницы, поэтому стилевые свойства добавляются к селектору body . Результат данного примера показан на рис. 1.

Фоновая картинка на веб-странице без повторения

Рис. 1. Фоновая картинка на веб-странице без повторения

См. также

  • background-image
  • background-repeat
  • Атрибут background
  • Градиенты в CSS
  • Фон в CSS
  • Фоновая картинка

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

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