Close

1 июля, 2021

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон</title>
<style>
body {
background-image: url(/example/image/bg2.png); /* Адрес картинки */
background-position-x: right; /* Положение фона справа */
background-repeat: no-repeat; /* Фон без повторения */
}
</style>
</head>
<body>
<p>Содержимое веб-страницы</p>
</body>
</html>

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

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

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

Автор: Влад Мержевич
Источник: webref.ru

Похожие статьи

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

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

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?