Всё для создания веб-сайта
Главная | Поиск | Обратная связь | Карта сайта | Версия для печати

Свойство background-image

Свойство background-image

Позволяет использовать изображение в качестве фона
пример использования:

В зависимости от поставленных перед web-сайтом задач разрабатывается дизайн сайта, нацеленный на продвижение именно этого товара (услуги), учитывая все его специфические особенности. Так, например, для создания сайта-каталога, достаточно красиво отформатировать текст, создать индивидуальные иконки. Большое количество графики на таком сайте, будет только мешать восприятию информации.

<style type="text/css">
   p.preview { background-image: url(image/penguins_light.gif); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; background-color: #f9fafc; }
</style>

<p class="preview">
   В зависимости от поставленных перед web-сайтом задач разрабатывается дизайн сайта, нацеленный на продвижение именно этого товара (услуги), учитывая все его специфические особенности. Так, например, для создания сайта-каталога, достаточно красиво отформатировать текст, создать индивидуальные иконки. Большое количество графики на таком сайте, будет только мешать восприятию информации.
</p>

Можно использовать более короткую запись описания класса стиля:

<style type="text/css">
   p.preview { background: url(image/penguins_light.gif) no-repeat fixed left bottom #f9fafc; }
</style>

параметры:
  • background-image - указывается путь к изображению
  • background-repeat - регулирует повторение изображения
    • repeat-x - повторение по горизонтали
    • repeat-y - повторение по вертикали
    • no-repeat - запрет повторения
    • inherit - наследует свойства "родительского" элемента
  • background-position - позволяет указать точное расположение фонового изображения на странице
    left top (10px 15px) - первое значение - координата по оси x, второе значение - координата по оси y
    допустимые значения:
    • по горизонтали - left, center, right (числовое или процентное значение);
    • по вертикали - top, center, bottom (числовое или процентное значение)
  • background-attachment - определяет, как должно двигаться изображение при прокрутке окна браузера
    • scroll - фон прокручивается вместе с содержимым страницы (значение по умолчанию)
    • fixed - при прокрутке текст и другие элементы перемещаются, а фоновое изображение остаётся неподвижным

Вернуться к списку

Авторизация
запомнить меня
Забыли свой пароль?
Поиск по сайту

Самое популярное

Статистика

Если вам понравился наш сайт, будем благодарны за размещение нашей кнопки на страницах Вашего сайта
как выглядит:

Учебник HTML, свойства CSS, сборник JavaScript, PHP скриптов

код нашей кнопки:

регистрация сайта в каталогах Заработай на своем сайте Заработай на своем сайте WOlist.ru - каталог сайтов Рунета