Как сделать фон страницы

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

Как сделать фон страницы

Можно ли обойтись средствами html при задании фона?

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

Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.

Как задать фон через css?

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

Например, если фон нужно задать всей странице в целом, то можно сделать это через селектор body, всем блокам – через селектор div. Ну и т.д.

Фон можно и нужно привязывать к любым другим селекторам: стилевым классам, идентификаторам и т.д.

Как сделать фон страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.

Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.

body{
background-color: #D4E6B3;
}

background-color: #D4E6B3;

Я советую вам сейчас создать на рабочем столе html и css файлы, подключить css к html и повторять за мной. Так вы поймете все намного лучше, чем если просто читать. Для работы с файлами советую использовать программу Notepad++. Назовите первый файл, например index.html, а второй — style.css. Подключить css к html можно так:

Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.

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

Картинка в качестве фона

  • В качестве картинки я буду использовать маленький значок языка html:
  • Создадим пустой блок с идентификатором:

Зададим ему явные размеры и фон:

#bg{
width: 400px;
height: 250px;
background-image: url(html.png);
}

background-image: url(html.png);

Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:

Как сделать фон страницы

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

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

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

  1. Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;
  2. Repeat-x – повторяется только по оис x;
  3. Repeat-y – повторяется только по оси y;
  4. No-repeat – не повторяется вообще;

Каждое значение вы можете прописать и посмотреть, что же случится. Я пропишу так:

background-repeat: repeat-x;

background-repeat: repeat-x;

Как сделать фон страницы

Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.

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

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

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

Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.

Позиция фона

По умолчанию фоновое изображение, если для него не задано повторение, будет находиться в левом верхнем углу своего блока. Но положение можно легко изменить с помощью свойства background-position.

Задавать его можно по-разному. Один из вариантов, это просто указать стороны в которых должна находиться картинка:

background-position: right top;

background-position: right top;

Как сделать фон страницы

То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:

Как сделать фон страницы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее background-position: 50% 50%;

background-position: 50% 50%;

Как сделать фон страницы

Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.

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

Сокращенная запись

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

background: #333 url(bg.jpg) no-repeat 50% 50%;

background: #333 url(bg.jpg) no-repeat 50% 50%;

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

Далее мы рассмотрим другое свойство – размер фона. Его уже не задашь сокращенно в качестве параметров в сокращенной записи.

Управляем размером фоновой картинки

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

Как можно поступить в таком случае? Конечно, самым простым и разумным вариантом будет просто уменьшение картинки, но не всегда есть возможность это сделать.

Допустим, она лежит на сервере и в данный момент нет времени и возможности ее уменьшить.

Проблему можно решить с помощью свойства background-size, которое можно назвать относительно новым и которое позволяет манипулировать размером фонового изображения, да и вообще любого фона.

Итак, моя картинка сейчас занимает все пространство в блоке, но я задам ей размер фона:

background-size: 80% 50%;

background-size: 80% 50%;

Как сделать фон страницы

Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.

Как вы можете догадаться, также размер фона можно указывать в пикселях. Еще есть два ключевых слова-значения, которые также можно использовать:

Cover – произойдет масштабирование картинки таким образом, чтобы хотя бы по одной стороне она полностью заполняла блок.

Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.

Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.

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

Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920.

Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.

В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.

Я напомню, она растянется на максимум по ширине. Соответственно, качество автоматически ухудшится.

Единственно правильным решением тут будет изначально использовать картинку большего размера – 1920 пикселей в ширину.

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

В общем, это всего лишь 1 пример того, как использовать знания, полученные вами в этой статье, при верстке реальных макетов.

Полупрозрачный фон с помощью css

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

Читайте также:  Как сделать вещь своими руками

Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.

Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);

Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.

Соответственно, для задания средней полупрозрачности нужно записать примерно так:

background: rgba(15, 17, 156, 0.5);

background: rgba(15, 17, 156, 0.5);

Зададим такой фоновый цвет блоку, вот что получится:

Как сделать фон страницы

Как задать фон тексту?

До этих пор мы с вами рассматривали задание фона для блочных элементов. Но что, если вам нужно задать фон именно тексту? Решение тут очень простое: фон нужно прописать строчному элементу, в котором написан текст. Значит, в первую очередь нужно создать этот строчный элемент. По умолчанию для этих целей советую использовать span.

Текст, к которому применим фон

Текст, к которому применим фон

Это нужно нам с вами лишь для того, чтобы иметь возможность в css обратиться к нашему спану, чтобы мы сейчас благополучно и сделаем:

#bg span{
background-color: white;
}

Проверяем:

Как сделать фон страницы

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

Больше возможностей в создании и управлении фоном

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Источник: https://webformyself.com/kak-sdelat-fon-v-html/

Как сделать фон для сайта?

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

Как сделать фон страницы

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

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

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

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

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

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

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

Фон сайта #55D52B

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

Фон сайта rgb(23,113,44)

Как сделать фон страницы

Фон сайта green

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

В 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]

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

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

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

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

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

Как сделать фон страницы

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

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

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

Источник: https://www.internet-technologies.ru/articles/kak-sdelat-fon-dlya-sayta.html

Как сделать фон в html и CSS?

Здравствуйте, дорогие друзья!

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

Навигация по статье:

Вы можете задавать фон блока или всей страницы с использованием различных вариантов:

  • при помощи цвета,
  • использовать изображение,
  • градиентный фон,
  • использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).

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

Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor

Чтобы сделать фон в виде изображения используем background и в кавычках указываем путь к файлу с картинкой.

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

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

  1. 1.В HTML коде присвоить элементу, для которого мы хотим задать цвет определённый класс или использовать атрибут style. Мне больше нравится вариант с классом, поэтому в первую очередь покажу его.

    Это блок, для которого нужно сделать фон

Это блок, для которого нужно сделать фон
  • 2.В файле, в котором вы задаёте CSS стили для вашего сайта, нужно дописать для этого класса свойство background с нужным значением фона.

    .block {
    background:#ccc;
    }

    • .block {
    • background:#ccc;
    • }
  • Если не знаете где и как подключить CSS или хотите дописать CSS стили прямо в HTML, то вам может понадобится эта статья:
    «Как css подключить к html?»

    Как сделать фон в виде цвета в CSS?

    Для задания цвета фона мы можем использовать несколько форматов:

    1. 1.Кодовое название цвета

      background:blue;

    2. 2.Шестнадцатеричный формат:

      background:# 013C74;

    3. 3.Формат RGBA, позволяющий не только задавать цвет но и регулировать уровень прозрачности фона и таким образом сделать эффект прозрачного фона.

      background:rgba(255,255,255,0.5);

      background:rgba(255,255,255,0.5);

    Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

    Как сделать фон страницы

    Так же вы можете воспользоваться вот этим инструментом для подбора нужного цвета и определения его кода. Просто водите мышкой по палитре, подбираете цвет и справа отображается его значение в шестнадцатеричном формате (HEX) и в формате rgb.

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

    Для этого нам нужно будет:

    1. 1.К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
    2. 2.Задать его в CSS

      background:url(images/bg.jpg);

      background:url(images/bg.jpg);
    1. В скобочках указываем путь к картинке.
    2. Путь указывается относительно файла CSS, в котором вы пишете это свойство.
    3. Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

    Как сделать фон страницы

    Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:

    background:url(images/bg.jpg) no-repat;

    background:url(images/bg.jpg) no-repat;

    Так же можно сделать чтобы он повторялся только по горизонтали:

    background:url(images/bg2.jpg) repeat-x;

    background:url(images/bg2.jpg) repeat-x;

    Или только по вертикали:

    background:url(images/bg2.jpg) repeat-y;

    background:url(images/bg2.jpg) repeat-y;

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

    • top – для выравнивание по верхнему краю
    • bottom — для выравнивания по нижнему краю
    • left – выравниваем по левому краю
    • right – по правому
    • center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

    Так же можно сочетать эти выравнивания.

    background:url(images/bg2.jpg) no-repeat top center;

    background:url(images/bg2.jpg) no-repeat top center;

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

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

    • background-size: 100% auto; — растянет изображение по горизонтали, а по вертикали размер будет увеличиваться пропорционально чтобы не искажалось изображение.
    • background-size: auto 100%; — растягивает по высоте, а по ширине размер пропорционально масштабируется.
    • background-size: 100% 100%; — растянет картинку по горизонтали и вертикали, при этом изображение может деформироваться.
    • background-size: contain; — изображение будет масштабироваться под размер блока насколько это возможно без искажения.
    • background-size: cover; — картинка масштабируется чтобы хотя бы одна из сторон была по размеру элемента и не искажалась.

    Как изменить расположение фона внутри элемента?

    Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.

    Воспользуемся свойством background-position:

    Как сделать фон страницы

    background-position: 20% 60px;

    background-position: 20% 60px;

    Как сделать фон страницы

    Вы можете сочетать эти единицы измерения между собой.

    Если мы делаем фон через CSS то можем сделать его неподвижным при прокрутке. Для этого задаём для блока, к которому у нас применён фон:

    background-attachment:fixed;

    background-attachment:fixed;

    Если нужно чтобы он прокручивался меняем fixed на scroll.

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

    Для создания градиентного перехода задаём для нужного элемента свойство background со значением linear-gradient:

    background:linear-gradient(#A4D8F7, #1C4D95);

    background:linear-gradient(#A4D8F7, #1C4D95);

    Как сделать фон страницы

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

    Как сделать фон страницы

    Так же можно задавать процентное соотношение цветов, направление градиента и так далее.

    Как сделать сразу нескольких фонов?

    Возможности CSS3 позволяют нам одновременно задать в качестве фона для одного элемента цвет и картинку или несколько картинок.

    background:url(images/bg2.jpg) no-repeat top center, #6ADAFC;

    background:url(images/bg2.jpg)  no-repeat top center, #6ADAFC;

    Указываем сначала картинку, после чего ставим запятую и пишем цвет.

    Картинка должна стоять на первом месте.

    Как сделать фон страницы

    Для задания нескольких картинок указываем их через запятую.

    background:url(images/bg2.jpg) no-repeat top center, url(images/bg3.jpg) no-repeat top left,url(images/bg3.jpg) no-repeat top right;

    background:url(images/bg2.jpg)  no-repeat top center, url(images/bg3.jpg)  no-repeat top left,url(images/bg3.jpg)  no-repeat top right;

    При этом для каждого изображения вы можете задавать своё позиционирование.

    Как сделать фон в HTML при помощи CSS?

    Как вы уже поняли, лучше использовать CSS для задания фона для элементов. Однако для этого не обязательно задавать для этого элемента класс и дописывать свойства в CSS файле.

    Можно воспользоваться атрибутом style и задать фон прямо в HTML файле.

    На этом у меня всё. Надеюсь что помогла вам разобраться с тем как сделать фон в HTML и CSS.

    Буду рада видеть ваши комментарии! Успехов вам и до встречи в следующих статьях!

    С уважением Юлия Гусарь

    Источник: https://impuls-web.ru/kak-sdelat-fon-v-html-i-css/

    » Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

    Главная » Основы HTML » Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12 Как сделать фон страницы

    Всем привет!
    Продолжаем изучать основы HTML.

    В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.

    Все довольно просто!
    Начнем из цвета!

    Я думаю, вы не пропустили урок №11, там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.

    Итак, как сделать цветовой фон в HTML…

    Цветовой фон в HTML

    Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
    В этом нам поможет атрибут «bgcolor». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body» :

    Либо так:

    Вот полный HTML-код:

    Текст страницы будет зеленый, а фон черным.

    Результат будет вот таким:

    Как сделать фон страницы

    Как сделать в HTML картинку фоном

    Если вы хотите сделать фон из картинки, тогда к тегу «body» пропишите атрибут «baсkground»:

    Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon» с расширением «.gif»):

    Как сделать фон страницы

    Вот полный HTML-код:

    Текст страницы на красивом фоне.

    Результат будет вот таким:

    Как сделать фон страницы

    Если фоновая картинка размещена в папке images или в какой-то другой папке, это будет выглядеть так:

    Как сделать фон страницы

    Вот полный HTML-код:

    Текст страницы на красивом фоне.

    На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
    Жду вас на следующих уроках.

    Источник: http://stepkinblog.ru/html/kak-sdelat-fon-v-html-stranice-osnovy-html-dlya-nachinayushhix-urok-12.html/

    HighStar

    Главная >> Уроки HTML 

    Bgcolor Рё Background

    Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! � где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом атрибуты? �, главное, каким образом разместить всю нашу красоту?

    Короче, РІРѕРїСЂРѕСЃРѕРІ – множество! Рђ ответ всего РѕРґРёРЅ. РќСѓ нету такого тега вообще! Еще РЅРµ придумали!

    Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!

    Фон, или как принято называть задний фон РІ переводе РЅР° английский означает background. Поэтому нет ничего проще запомнить РґРІР° атрибутика, созданных РІ его честь. РћРґРёРЅ – background, Р° РґСЂСѓРіРѕР№ – bgcolor.

    Так чем же они отличаются? Какими возможностями обладают? �, главное, чем будут нам полезны?

    Начнем, СЃ самого простого – bgcolor. Этот атрибут отвечает Р·Р° цвет фона. Р’С‹ можете подставить любое значение, РІ буквенном или РІ числовом значении цвета Рё ваш фон окрасится как РїРѕ волшебству.

    Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:

    Листинг 11. Файл index.html

                РЈСЂР°! Привет РјРёСЂ! Привет люди! Встречайте!   

    Сохраним наше творение под тем же именем и посмотрим, что получилось:

    Как сделать фон страницы РЇ РЅР° синем фоне

    Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами.

    Только не забудьте впереди числа поставить решетку. � все у вас получится! Можете поиграть разными цветами, пока не надоест.

    Рђ как надоест, будем читать дальше РїСЂРѕ РґСЂСѓРіРѕР№ атрибут – background.

    Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев.

    Обои можно подобрать любые, какие только подскажет вам фантазия. Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке.

    А потому, не мудрствуя лукаво, открываю свой файл index.html и делаю следующие изменения:

    Листинг 12. Файл index.html

                РЈСЂР°! Привет РјРёСЂ! Привет люди! Встречайте!   

    Сохраняем этот файл и смотрим, что у нас получилось

    Как сделать фон страницы РѕРЅРѕ – фоновое изображение!

    Что Р¶, СЃ РѕРґРЅРѕР№ стороны, приятно видеть столько умных людей РІ РѕРґРЅРѕРј месте, РЅРѕ СЃ РґСЂСѓРіРѕР№ стороны… РЅСѓ РєСѓРґР° столько??? Однако, отбросив шутки РІ сторону, можно понять, что же сделал атрибут background – РѕРЅ просто РІР·СЏР» Рё размножил РёСЃС…РѕРґРЅРѕРµ изображение, заполнив РёРј весь экран.

    Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! � мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения.

    Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 476 пикселей.

    Вот и подберем такое изображение.

    Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 476, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:

    Листинг 13. Файл index.html

                РЈСЂР°! Привет РјРёСЂ! Привет люди! Встречайте!   

    Опять сохраняем и смотрим результат

    Как сделать фон страницы Р� РІРѕС‚ РѕРЅРѕ – РјРѕСЂРµ! Р�грает, шумит РЅР° просторе…

    Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей! Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина:

    Как сделать фон страницы Печально СЏ гляжу РЅР° это отраженье…

    Согласитесь, это совсем не то, что хотелось.

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

    Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. � я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка.

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

    РўСѓС‚ главная хитрость постараться сделать эту картинку “без швов”. РўРѕ есть, чтобы РЅРµ было РІРёРґРЅРѕ стыков между соседними изображениями.

    � для этого нам опять понадобится незаменимая программа Adobe Photoshop.

    Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из �нтернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.

    ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.

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

    Так что если вы хотите сделать что-то, пусть и сопливое, но СВОЕ, предлагаю закатать рукава, и взяться за дело.

    Тем более это очень увлекательное занятие, от которого просто трудно оторваться.

    � этим делом мы сейчас и займемся.

    п»ї

    Источник: https://highstar.ru/lesson_html/18.php

    Как сделать фон в HTML?

    Задать фоновый цвет и/или картинку для страницы или отдельного её элемента достаточно просто. Главное знать, где и как это можно сделать, а также иметь код цвета и/или фоновую картинку.

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

    Главное, что Вы получите не только общее представление и готовые примеры, но и понимание того, как сделать фон в HTML.

    Как сделать фон страницы

    Чтобы задать фон в HTML используйте промежуточный DOCTYPE

    А начну я с того, что в HTML5 нет возможности задать фон для сайта. Эту возможность было решено вынести в CSS. Поэтому, если Вы планируете использовать ниже изложенное, и хотите получить валидный (правильный) код, Вам нужно остановиться на переходном типе документа. Для этого ваша веб-страница должна начинаться со следующей строки:

    Как создаётся фон на веб-странице?

    Если с этим разобрались, давайте перейдём к пониманию того, как создаётся фон. И первое, что здесь нужно отметить – это различие между фоновым цветом и фоновой картинкой.

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

    Визуально это можно изобразить следующим образом:

    Фон HTML-документа и его элементов

    Второе, что Вам нужно знать – это различие между телом документа и элементом документа. Тело документа обозначается в HTML-коде веб-страницы тегом BODY, который включает в себя всё содержание веб-страницы. Очевидно, что фон тела документа не может быть прозрачным. Если фон тела документа не задан, используется значение по умолчанию, заданное в настройках браузера.

    Элементы страницы находятся внутри тега BODY. Примечательно, что задать цвет и/или фоновую картинку средствами HTML можно далеко не для всех элементов документа. Например, фоновую картинку можно указать только для таблиц. По умолчанию, они обычно имеют прозрачный фон.

    Атрибут bgcolor для создания фонового цвета

    • Для того чтобы задать фоновый цвет документа или его элементов используется атрибут bgcolor, например:
    • В данном случае мы задаём фоновый цвет для страницы в целом. А вот пример того, как задать фоновый цвет для таблицы, в теге TABLE:
    •  

    • Текст с фоном

    Примечательно, что фоновый цвет в таблице можно указать и для строк в теге TR и для их ячеек в теге TD.

    Как узнать код цвета?

    Вы, наверное, уже заметили, что цвет в HTML задаётся специальным кодом, например: #ec008c. Для того чтобы узнать код нужного Вам цвета Вы можете использовать один из графических редакторов.

    Например, в Photoshop можно использовать «Eyedropper Tool» (Пипетка) для получения цвета из точки на картинке.

    Затем, нужно кликнуть полученный цвет на панели инструментов и в открывшемся окне «Color Picker» (Выбор цвета) скопировать код цвета.

    1. Обращаю Ваше внимание на то, что этот код будет без знака решетки (#) в начале, это знак нужно будет добавить вручную.
    2. Также Вы можете использовать многочисленные онлайн сервисы, например:
    • HTML Color Codes,
    • HTML Color Picker
    • и т.д.

    Их принцип работы ещё проще – кликаете нужный цвет и получаете его код.

    Атрибут background для создания фоновой картинки

    Также как в случае с фоновым цветом, так и в случае с фоновой картинкой, Вам нужно использовать специальный атрибут, а именно background, например:

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

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

    • А вот пример того, как задать фоновую картинку для таблицы, в теге TABLE:
    •  

    • Текст с фоном

    Примечательно, что фоновую картинку можно задать только для таблицы в целом и/или её отдельной ячейки. Для строки это не получится.

    Абсолютный и относительный путь к фоновой картинке

    Отдельно стоит уделить внимание адресу фоновой картинки. В данном случае используется относительный путь к картинке, т.е. адрес указан относительно места нахождения файла картинки к файлу веб-страницы. Такой вариант нельзя назвать особо удачным. Лучше всего использовать абсолютный путь к картинке, т.е. полный её URL-адрес, например:

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

    Подведём итоги

    Использование атрибутов bgcolor и background морально устарело, потому для валидности HTML-кода Вам придётся использовать переходной DOCTYPE.

    Для задания фонового цвета в HTML использует специальные коды, которые Вы можете узнать в графическом редакторе или используя специальные онлайн сервисы. Фоновая картинка дублируется в приделах отведённой ей области и ложится поверх фонового цвета.

    Для указания фоновой картинки лучше использовать полный её URL-адрес. На этом у меня всё. Спасибо за внимание. Удачи!

    Короткая ссылка: http://goo.gl/03TsNz

    Источник: http://chuvyr.ru/2014/06/kak-sdelat-fon-v-html.html

    Фон для сайта (свойство CSS background)

    Как сделать фон страницыЕсли вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

    Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта.

    Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background).

    Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

    Background-color

    Задает цвет фона. Можно применять к отдельным элементам

    ,

    или ко всему сайту через через тэг :

    /* черный фон сайта */
    body { background-color: #000;
    }
     
    /* черный фон заголовка, белый цвет шрифта */
    h1 { color: #fff; background-color: #000;
    }

    /* черный фон сайта */ body { background-color: #000; } /* черный фон заголовка, белый цвет шрифта */ h1 { color: #fff; background-color: #000; }

    Background-image

    Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

    body { background-color: #000; background-image: url (“my-image.jpg”);
    }

    body { background-color: #000; background-image: url (“my-image.jpg”); }

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

    Background-size

    Определяет размер фонового изображения.

    div { background: url(my-image.jpg); background-size: 100% 100%; background-repeat: no-repeat;
    }

    div { background: url(my-image.jpg); background-size: 100% 100%; background-repeat: no-repeat; }

    Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

    Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

    Background-repeat

    Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

    • background-repeat: repeat-x — изображение повторяется только по горизонтали
    • background-repeat: repeat-y — изображение повторяется только по вертикали
    • background-repeat: repeat — изображение повторяется по горизонтали и вертикали
    • background-repeat: no-repeat — изображение не повторяется

    background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

    • background-attachment: scroll — прокручивается вместе со страницей
    • background-attachment: fixed — при прокрутке фон остается неподвижным

    Background-position

    Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

    • в фиксированных единицах (пикселы, сантиметры)
    • в процентах
    • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

    Рассмотрим примеры:

    • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
    • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
    • background-position: right bottom — рисунок располагается снизу справа.
    • Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
    • [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
    • Например:
    background: #000 url(“my-image.jpg”) no-repeat fixed left bottom;

    background: #000 url(“my-image.jpg”) no-repeat fixed left bottom;

    Если какое-то свойство пропускается, то его значение установлено по умолчанию.

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

    Источник: http://design-mania.ru/web-design/html-css/css-background/

    Ссылка на основную публикацию