Как сделать фиксированный фон?

Автор: Илья Остапенко /

Приветствую тебя дорогой друг. Фиксированный фон придает сайту красивый вид. Он подходит для любого сайта если его правильно установить. Узнайте из этой статьи как правильно сделать фиксированный фон. Порой удивляюсь, почему люди до сих пор не знают, как сделать такой простой трюк? В этом нет ничего сложного, достаточно знать что такое CSS и установить правильный размер фонового изображения. Ну, собственно давайте перейдем к самому уроку.

как сделать фиксированный фон

Фиксированный – иначе говоря, неподвижный. Обычно такой фон, ставят назад, а поверх него немного меньшими размерами ставят, рабочую область, которая будет подвижной при прокрутке странице. Собственно говоря, все это вы увидите в примере, который мы в итоге создадим.

 

Фиксированный фон сайта

Итак, откройте блокнот или html редактор, и давайте добавим в него, код страницы:

 

Теперь нужно сохранить это код в файле с расширением html. Если вы, как и я создаете в блокноте, тогда сохраняя документ, после названия файла добавьте .html, а если в html редакторе тогда он, итак сохранит вам в нужном формате. Да, забыл сказать, сохраните файл в отдельной созданной папке.

Теперь подберите нужное фоновое изображение и сохраните его в этой же папке. Важно чтобы фоновое изображение имело размеры 1280х1024. Не забудьте сжать и уменьшить в размере ваше фоновое изображение. Как это сделать вы можете прочитать в статье "уменьшить размер фото". На мой взгляд, это самое подходящее разрешение, так оно будет хорошо выглядеть, как на большом, так и на маленьком мониторе. Это мои рекомендации, вы можете сделать все по своему, тут уже дело ваше.

Ну а теперь давайте рассмотрим код. В основном все настройки находятся в css коде. Сейчас я вам его объясню.

 

Тегу body присваиваем свойства, находящиеся в фигурных скобках. Первое свойство, это установка фонового изображения. Мое фоновое изображение называется fon и расширение его jpg. Вы прописывайте, свое название и расширение. Дальше идет свойство повторения фона на странице, как вы наверно уже поняли, оно выключено. Ну и последнее свойство устанавливает, будет ли фоновое изображение прокручиваться или нет. Параметр fixed делает фоновое изображение неподвижным.

Собственно говоря, вот и все, фоновое изображение неподвижно. Теперь давайте рассмотрим параметры рабочей области. Она будет находиться в блоке с классом container:

 

Классу container присваиваем свойства в фигурных скобках. Первые два свойства, надеюсь, понятны, ширина и высота. Такую большую высоту я поставил, для того, чтобы появилась полоса прокрутки. Обычно ставится или 100% или это свойство вовсе не прописывается. Далее устанавливается фоновый цвет, в данном случае белый. И завершающие четыре свойства, устанавливают отступ рабочей области. В моем примере отступы установлены так, чтобы рабочая область была по центру страницы. В основном, вот из чего состоит фиксированный фон.

Про html код рассказывать не буду, так как в принципе и нечего. Стандартный скелет с одним установленным блоком, рабочей области. На этом все! Как видите, сложного ничего нет. Это так же просто, как и создать горизонтальное меню или CSS шаблоны. Вы можете посмотреть пример (ссылка немного ниже), как это будет выглядеть. Так же в приложении (под тегами), вы можете скачать исходники этого урока.

Нет ничего легче, чем создать фиксированный фон на сайте. Прочитав эту статью надеюсь Вы поняли как сделать фиксированный фон, который будет привлекать внимание посетителей.

Комментарии к записи


      Илья Остапенко

        ter

Оставить комментарий

Это не спам.