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

🕛 23.01.2009, 00:01

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

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

<style type="text/css"> BODY { background: url(путь к графическому файлу) no-repeat; }
</style>

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Фон</title> <style type="text/css"> BODY { background: url(images/bg2.png) no-repeat; /* Параметры фона */
 } </style> </head> <body> <p>Содержимое веб-страницы</p> </body>
</html>