Главная » Языки программирования

Фон

Содержание
  1. background — repeat
  2. Кратко
  3. Пример
  4. Как пишется
  5. Подсказки
  6. На практике
  7. Алёна Батицкая советует
  8. Как сделать, чтобы фон не повторялся?
  9. Решение
  10. Описание
  11. CSS по теме
  12. Популярные рецепты
  13. background-repeat
  14. Интерактивный пример
  15. Синтаксис
  16. Значения
  17. Примеры
  18. HTML
  19. CSS
  20. Результат
  21. Спецификация
  22. Поддержка браузеров
  23. Смотрите также
  24. Found a content problem with this page?
  25. MDN
  26. Support
  27. Our communities
  28. Developers
  29. background-repeat
  30. Синтаксис
  31. Значения
  32. Объектная модель
  33. Браузеры
  34. CSS по теме

background — repeat

При помощи этого свойства и небольшой картинки можно создавать красивые паттерны на фоне.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element">div>      
 .element  height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto;> .element  height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto; >

Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали.

Изменим значение на repeat — x :

 .element  background-repeat: repeat-x;> .element  background-repeat: repeat-x; >

Теперь картинка повторяется только по горизонтали. Аналогично можно повторить картинку по вертикали при помощи значения repeat — y .

Но чаще всего в работе встречается значение no — repeat . С таким значением фоновая картинка не будет повторяться ни по горизонтали, ни по вертикали.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

В качестве значения для свойства background — repeat используются следующие ключевые слова:

  • no — repeat — фоновое изображение не повторяется, остаётся только одно внутри элемента.
  • repeat — изображение повторяется и по горизонтали, и по вертикали до тех пор, пока не заполнит всю площадь элемента (значение по умолчанию).
  • repeat — x — фон повторяется по горизонтали.
  • repeat — y — фон повторяется по вертикали.
  • space — изображение повторяется до тех пор, пока не заполнит весь элемент. При этом, если по размерам не удаётся повторить изображение без обрезки, то между картинками добавляется равное пространство. Крайне редко требуется в работе.
  • round — изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется. Крайне редко требуется в работе.

Ключевые слова repeat и no — repeat можно комбинировать, чтобы управлять повторениями по горизонтали (первое значение) и по вертикали (второе значение). Но проще указывать специальные ключевые слова repeat — x и repeat — y .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Значение по умолчанию — repeat .

💡 Чаще всего для полноэкранных фонов указывается значение no — repeat .

💡 Свойство background — repeat нельзя анимировать 😒

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

background — repeat — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.

🛠 С помощью повторения фона и линейного градиента ( linear — gradient ) можно создавать полосатые фоны.

 div class="element">div>      
 .element  height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y;> .element  height: 100vh; background-image: linear-gradient( #49a16c 50px, #064236 0 ); background-size: 100% 100px; background-repeat: repeat-y; >

Источник

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

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

Решение

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

Описание

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

CSS по теме

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

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

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

Источник

background-repeat

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

Интерактивный пример

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).

Синтаксис

/*Ключевые значения*/ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /*Два значения: горизонтальное | вертикальное*/ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* Глобальные значения */ background-repeat: inherit; background-repeat: initial; background-repeat: unset;

Значения

    • : Следующие однозначные имеют двухзначные эквиваленты: repeat-x тоже самое, что и repeat no-repeat
      repeat-y тоже самое, что и no-repeat repeat
      repeat тоже самое, что и repeat repeat
      space тоже самое, что и space space
      round тоже самое, что и round round
      no-repeat тоже самое, что и no-repeat no-repeat В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.
      repeat Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
      space Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space .
      round Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
      no-repeat Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством background-position .

    Примеры

    HTML

    ol> li>no-repeat div class="one"> div> li> li>repeat div class="two"> div> li> li>repeat-x div class="three"> div> li> li>repeat-y div class="four"> div> li> li>repeat-x, repeat-y (multiple images) div class="five"> div> li> ol>

    CSS

    /* Совместно для всех DIVS в примере */ li margin-bottom: 12px;> div  background-image: url(starsolid.gif); width: 144px; height: 84px; > /* повторение фона CSS */ .one  background-repeat: no-repeat; > .two  background-repeat: repeat; > .three  background-repeat: repeat-x; > .four  background-repeat: repeat-y; > /* Несколько изображений */ .five  background-image: url(starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; >

    Результат

    В этом примере каждому элементу списка соответствует другое значение background-repeat .

    Спецификация

    Начальное значение repeat
    Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
    Наследуется нет
    Обработка значения список, каждый элемент которого содержит 2 ключевых слова, по одному на размер
    Animation type discrete

    Поддержка браузеров

    BCD tables only load in the browser

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

    Found a content problem with this page?

    This page was last modified on 22 февр. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    background-repeat

    Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

    Синтаксис

    background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit

    = repeat-x | repeat-y | [repeat | space | round | no-repeat]

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

    Значения

    no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat . repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat . repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat . repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat . inherit Наследует значение родителя. space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство. round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

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

    Повторение фона по горизонтали

    Рис. 1. Повторение фона по горизонтали

    Сама фоновая картинка приведена на рис. 2.

    HTML5 CSS3 IE Cr Op Sa Fx

    Объектная модель

    [window.]document.getElementById(» elementID «).style.backgroundRepeat

    Браузеры

    Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

    Значения round и space поддерживаются только в IE9 и Opera 11.0.

    CSS по теме

    Источник

    Читайте также:  Открывающий открытый закрывающий закрытый тег элемент html
Оцените статью
© 2024 Программирование