За умовчанням фонова картинка повторюється по горизонталі та вертикалі, шикуючись мозаїкою по всьому елементу. Така поведінка не завжди потрібна, часто картинка використовується для стилізації і має виводитися лише один раз. Для цього до властивості 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. Фонове зображення на веб-сторінці без повторення