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

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой по всему элементу. Такое поведение не всегда требуется, часто картинка используется для стилизации и должна выводиться только один раз. Для этого к свойству 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.

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