Что поставить на фон

Что поставить на фон

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

  • Цвет;
  • Фоновую картинку;
  • Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:


Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:


Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Читайте также:  Загрузки перевести на английский

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .


Как видно из кода, привязка изображения происходит через путь url , заданный в скобках. Но не все картинки оказываются такими большими, чтобы своими размерами заполнить всю площадь экрана. Посмотрим, как будет отображаться меньший по величине рисунок.

Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!

Нам нужно, чтобы изображение отображалось посредине экрана один раз. Но, к сожалению, браузер не понимает наших возвышенных желаний. И выводит меньшую по размерам картинку для фона сайта столько раз, сколько может вместить в себя площадь экрана:

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

  • repeat-x – повторение фонового изображения по горизонтали;
  • repeat-y – по вертикали;
  • repeat – по обеим осям;
  • no-repeat – повторение запрещено.

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


Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

  • Ключевым словом ( top , bottom , center, left, right) ;
  • Процентами – отсчет начинается от верхнего левого угла;
  • В единицах измерения ( пикселях ).

Воспользуемся самым простым вариантом центрирования:

Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment . Принимаемые им значения:

  • scroll;
  • fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Читайте также:  Проблема с запуском risen

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

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

Результат будет аналогичным.

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

Поэтому выбирать их необходимо внимательно и с учетом определенных факторов.

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

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

Читайте также:  Хамачи официальный сайт регистрация

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

Где можно найти новые обои для рабочего стола или картинки на телефон? В первую очередь внимания заслуживают тематические сайты, на страницах которых размещены различные фото и изображения. К примеру, вы можете подобрать себе обои на рабочий стол на http://7fon.ru. Чем примечателен этот ресурс?

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

Как сделать картинку фоном в html, код, примеры, background, image.

Прежде чем ставить картинку на задний фон, то нужно учитывать, что в зависимости от разрешения картинки, задний фон будет на весь экран, либо будет занимать всего лишь часть!

Картинку на задний фон можно поставить несколькими способами:

1.Вставить код в саму страницу.

Для того, чтобы это увидеть, как это будет выглядеть, будем создавать новую страницу для каждого варианта.

Как поставить картинку на задний фон страницы?

Пропишем в самой странице код заднего фона.

Опять же, для этого есть несколько вариантов решения:

Ссылка на основную публикацию
Чернила светятся в ультрафиолете
Употребление симпатических (невидимых) чернил подразумевает запись неразличимую в обычных обстоятельствах, но появляющуюся после фото, химической или физической проявки. Это есть...
Формула частота в excel
При анализе данных периодически возникает задача подсчитать количество значений, попадающих в заданные интервалы "от и до" (в статистике их называют...
Формула тейлора с остатком в форме пеано
Формулировка: Если существует , то представима в следующем виде: Это выражение называется формулой Тейлора с остаточным членом в форме Пеано...
Чернила для принтера в шприцах
Заправочные комплекты INKO в шприцах 3х20 мл., с высококачественными чернилами на основе красителя (Dye ink) и пигментные чернила (Pigment ink)...
Adblock detector