Stfw.RuКак поместить фоновый рисунок в правый нижний угол страницы?
🕛 23.01.2009, 00:00
Для управления положением фонового рисунка на странице применяется стилевой атрибут background-position, он одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется атрибут background-position со значением no-repeat. В то же время все эти параметры можно заменить одним универсальным background, который задает путь к графическому файлу, положение картинки и способ ее повторения, как показано в примере 1.Добавление фонового рисунка к селектору BODY имеет одну особенность. Картинка будет располагаться не внизу страницы, а внизу блока с контентом, что особенно заметно при небольшом объеме текста или увеличении размеров окна браузера. Установив высоту 100% для селектора HTML, тем самым обеспечим позиционирование фона в правом нижнем углу окна браузера.
Пример 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"> HTML { height: 100%; /* Высота страницы */ } BODY { background: url('images/tomatos.jpg') right bottom no-repeat; /* Путь к файлу с изображением, положение в правом нижнем углу и отмена повторения фона */ margin-right: 200px; /* Отступ справа */ } </style> </head> <body> <h1>Консервы из помидор</h1> <p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды - 35 г поваренной соли и 6г лимонной кислоты). Банки прикрывают крышками и ставят на прогревание, выдерживая в кипящей воде: литровые - 5-8, трехлитровые - 12-15 мин. Затем их укупоривают и охлаждают.</p> <p>Примерный расход сырья и продуктов на литровую банку: помидоров красных отборных - 550-600 г, соли - 15 г, лимонной кислоты - 3 г.</p> </body>
</html>