Свойство CSS background-image - это отличный способ добавить визуальной глубины вашему дизайну. Оно позволяет назначить элементу фоновое изображение, которое станет самым нижним слоем в стеке отрисовки. Это значит, что весь текст и границы будут уверенно лежать поверх вашей картинки. По умолчанию браузер «прибивает» изображение к верхнему левому углу и повторяет его по всей площади, но вы всегда можете взять этот процесс под свой полный контроль. Чтобы гибко управлять тем, где именно находится зона позиционирования фона, используйте соответствующие свойства. Также не забудьте про контроль за отношением фонового слоя к границам элемента - это критически важно для аккуратного вида интерфейса. А вот и приятный нюанс: если браузер не сможет загрузить картинку (например, путь указан с ошибкой или файл потерялся), он просто молча поступит так, как будто вы указали значение none. Никаких ошибок на экране - просто отсутствие фона. | Значение по умолчанию: | none | | Наследуется: | нет | | Версия: | CSS1 | | Синтаксис JavaScript: | object.style.backgroundImage="url(stars.gif)" | | Значение | Описание | | url('URL') | Укажите путь к вашему изображению. Кавычки (одинарные или двойные) - дело вкуса, они не обязательны. Настоящая магия начинается, когда вы задаёте несколько фонов: просто перечисляйте пути через запятую (url('URL'), url('URL'), ...), и слои начнут наслаиваться друг на друга! | | none | Простое указание того, что фонового изображения здесь нет. | | inherit | Свойство берёт значение у родительского элемента. Удобно для единообразия стиля во всей иерархии DOM. | Пример html head style type="text/css" body { background-image: url('1.gif'); } /style /head body h1Hello World!/h1 /body /html
|