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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обратите внимание

Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет.

Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.

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

background-color: #D4E6B3;

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

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

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

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

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

Создадим пустой блок с идентификатором:

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

background-image: url(html.png);

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

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

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

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

Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;

Repeat-x – повторяется только по оис x;

Repeat-y – повторяется только по оси y;

No-repeat – не повторяется вообще;

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

background-repeat: repeat-x;

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

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

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

Важно

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

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

Позиция фона

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

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

background-position: right top;

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

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

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

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

background-position: 50% 50%;

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

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

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

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

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

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

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

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

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

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

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

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

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

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);

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

Читайте также:  Что такое классификация запросов

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

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

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

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

Проверяем:

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

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

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

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

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

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

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

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

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

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

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

1

Откройте свой HTML файл по средствам блокнота либо любого другого текстового редактора, к которому вы привыкли.

2

Для примера возьмём примитивную страницу сайта с минимумом текста. Открыть свой файл вы можете с помощью любого браузера.

3

Важно

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

Некоторое количество времени, пока картинка загружается, они смогут видеть лишь цвет вашего сайта.
Впишите в тэг параметр bgcolor=”*****”, где ***** – это шифр цвета.

Узнать цвета для HTML вы можете в любом графическом редакторе, выбрав опцию “для вэб” либо на сайте https://colorscheme.ru/color-names

4

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

5

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

6

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

7

Теперь узнайте расположение файла, кликнув по нему правой кнопкой мыши, выбрав строку “Открыть с помощью” и кликнув на любой браузер, установленный на вашем компьютере.

8

Скопируйте адрес из поисковой строки вашего браузера.

9

Теперь в тэге впишите строку:

  • style=”background-image: url(‘file:///C:/Users/ПУТЬ_ФАЙЛА.jpg’)”

10

Сохраните свой файл.

11

Проверьте свою веб страницу. Вы увидите, что фон подставлен под ваш текст.

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

  • background-repeat: “Значение“. Варианты вашего значения могут быть такими: “repeat-x” – повторяет ваше фоновое изображение и по горизонтали, и по вертикали. “repeat-y” – повторение только по вертикали. “no-repeat” – изображение заморожено на месте и не повторяется. “space” – вся страница заполнится максимальным количеством копий изображения, крайние обрежутся. “round” – такая же опция, но по краям изображения будут аккуратно масштабироваться;
  • background-attachment: “Значение”. Если подставить вместо слова Значение тэг “scroll“, то изображение будет прокручиваться вместе с сайтом. “fixed” – при прокрутке фон остаётся неизменным;
  • background-size: Значение Значение2. Здесь значения должны принимать величину в пикселях. Например: 100px 200px. Кроме пикселей принимаются значения в процентах. Это параметр заполнения страницы изображением. Кроме чисел можно вписать два параметра: “contain” – заполняет страницу изображением по длинной стороне и “cover” – заполняет страницу изображением по ширине.

Зная основы заполнения страницы фоном в HTML вы готовы к созданию своего первого сайта.

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

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

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

Содержание страницы

  • Как изменить фон сайта
  • Фиксированный полностью фон
  • Наложение полного градиента на фон
  • Как сделать картинку фоном сайта

Параметром для определения фона страницы для браузеров — является свойство background, который имеет ряд различных значений:

Свойства и значения для фона

  • background-attachment: позволяет фоновому изображению быть зафиксированным, или прокручиваться с основным контентом, в зависимости от выбранного значения (fixed | scroll);
  • background-color: позволяет определить цвет фона страницы, в зависимости от выбранного значения (#…… | transparent);
  • background-image: отображает фон страницы в виде указанной картинки (фото) и имеет два значения (url() | none);
  • background-repeat: позволяет повторяться рисунку указанному в background-image в разных направлениях, в зависимости от выбранного значения (no-repeat | repeat | repeat-x | repeat-y).

Как изменить фон сайта

https://www.youtube.com/watch?v=LWuRytXKras

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

Однотонный цвет фона (для примера: розовый)

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

Код Фон градиент с рисунком для фона

Пример — нажмите для просмотра

В этом примере: fon.jpg — это подготовленный заранее рисунок с наложенным градиентом, где ширина его составляет всего 2px (рекомендуется в пределах от 1 до 5 px), а высота условно с размер шапки — 200px, её вы подгоняете соответственно под себя.
А основной цвет background-color: #c3ced7; — берётся из самой нижней точки этого же рисунка.

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

Совет

Из нашего примера очень отчётливо видно, что наш фон скролируется (перемещается) вместе с содержимым страницы. И теперь мы добавим в наш код background-attachment: fixed; и тем самым зафиксируем наш фон.

Код для фиксированного фона

Наложение полного градиента на фон

А здесь мы рассмотрим пример, как наложить фиксированный градиент на фон страницы не используя никаких рисунков (фото), только с помощью цвета. Единственный минус — в IE фон скролируется, в остальных же браузерах работает исправно.

Код полного градиента для фона

Пример — нажмите для просмотра

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

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

Для этого вам необходимо подобрать желаемую картинку с размерами примерно: 1600х1200.

Маленькие картинки использовать не рекомендуется, так как при увеличении будет падать качество, да и во-вторых: опять же проблемы с IE — он просто так не увеличивает фото, для этого ему необходимы дополнительные коды и скрипты.

Код для фона в виде картинки

Источник: https://age-dragon.com/html-css/6-fon-dlya-saita.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/

Как установить фон для сайта?

Всем привет! На связи с вами ваш покорный слуга с порцией полезного и практического материала на тему как установить фон для сайта.

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

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

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

Он отображается в списке поисковика Гугл на первом месте поэтому в работе рекомендую именно его. Также вы можете найти большое количество других сайтов если наберете в поисковике примерно такие словосочетания «background image patterns», «download background image for site» и так далее.

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

В этой статье я выбрал тему и называется она tweed. Скачать вы можете ее здесь.

Вот как она выглядит в небольшом варианте на сайте

Далее нам нужно создать небольшой документ с расширением html. Делать его мы будем с помощью очень хорошей программы для работы с веб документами – NOTEPAD++

В начале создаем новый документ в программе

И обязательно перед его редактированием сохраняем под именем, например index.html и создаем папку на компьютере, например можно создать папку «My site» и уже в нее помещать наш индексный файл (index.html).Лучше создавать папку на английском языке, чтобы не было путаницы у браузера и некорректного отображения сайта.

Помимо этого в главной папке «my site» вам нужно создать еще две подпапки, в одно мы будем помещать все наши картинки и называться она будет «images», а другой дадим название «CSS» (каскадные таблицы стилей) и поместим туда файл style.css

Важно

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

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

В теге title можете поменять название документа, например можете сделать «Моя первая веб страница». И убедитесь что ваша страница сохранена в кодировке  UTF-8

В противном случае если будет стоять другая кодировка, например windows-1251, то текст документа в браузере будет отображаться иероглифами. Поменять кодировку вы можете в разделе «Кодировки – Кодировать в Utf-8 (без BOM)» на панели инструментов программы.

И не забываем каждое наше действие сохранять.

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

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

Для этого в нашей программе Notepad++ создадим еще один файл и назовем его Style.css и сохраним его в новой папке css, которая будет находиться в общей папке «My site»

Отлично! Чтобы наш браузер правильно отобразил страницу нам необходимо подключить таблицу стилей в наш html документ. Вот как это делается

Совет

Прямо целиком вводим всю строку над тегом title. Этой строкой мы подключаем нашу таблицу стилей.
Теперь мы для нашего тега body определим фоновую картинку через таблицу стилей. Для этого мы в документе style.css создаем следующую структуру (прямо также берете и пишите в коде программы)

Здесь немного поясню. У атрибута background есть много значений, одно из которых background-repeat, которое отвечает как раз за то, чтобы растянуть нашу фоновую картинку для веб документа.

BACKGROUND-REPEAT:

REPEAT //(растиражировать по горизонтали и вертикали)REPEAT-X // (растянуть только по горизонтали)REPEAT-Y //(растянуть только вертикали)NO-REPEAT //(не повторять фоновую картинку)

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

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

BRUSHEASY.COM

[urlspan]COLOURLOVERS.COM[/urlspan] [urlspan]DESIGNMOO.COM[/urlspan]

WEBDESIGNLEDGER.COM

[urlspan]DINPATTERN.COM[/urlspan]

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

Источник: http://smarticle.ru/kak-ustanovit-fon-dlya-sajjta/

HighStar

         Ура! Привет мир! Привет люди! Встречайте!   

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

Я на синем фоне

Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут — 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 и PHP

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

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

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

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

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

О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: «Плагин Hyper Cache» и «Оптимизация базы данных».

Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.

Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.

Чтобы сделать фон (паттерн) существует огромное число способов. Например, вы можете открыть любой поисковик и вбить в строку поиска запрос «Скачать фон для сайта», а потом долго просматривать различные сайты в надежде отыскать подходящий паттерн.

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

1) PatternCooler

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

Посмотрите, что у меня получилось выбрать для себя:

2) Stripegenerator

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

Мой результат работы:

3) BgPatterns

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

Посмотрите, что я подобрал себе:

Важно

4) Tartanmaker

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

Как поменять фон на сайтах HTML и PHP

Если вы работаете с сайтом разработанным исключительно на HTML, тогда вам понадобиться вставить фон в открывающий тег … Должно получиться примерно следующее:

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

Если основной паттерн не загрузится, вместо него подгрузится цвет, указанный в bgcolor (FFFFFF).

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

Для этого я закачиваю картинку (паттерн) на хостинг, папка находится по такому адресу:

/httpdocs/wp-content/themes/Prosumer/images

/httpdocs/wp-content/themes/Prosumer/images

Затем необходимо открыть файл style.css и указать адрес, где хранится ваше изображение.

Перезагружаем страницу сайта и смотрим полученный результат.

P.S. Еще хотелось бы добавить, что вы можете настраивать как будет повторяться паттерн. Для этого существует атрибут repeat.

background: #FFFFFF url(images/fon-1.png) repeat;

background: #FFFFFF url(images/fon-1.png) repeat;

Основные настройки:

  • — repeat — изображение будет повторяться как по вертикали, так и по горизонтали;
  • — repeat-x — повторение только по горизонтали;
  • — repeat-y — повторение только по вертикали;
  • — no-repeat – запрет на повторение.

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

Посмотрите видео «Как поменять фон на сайте» и у вас не должно остаться никаких вопросов.

Источник: http://SEOslim.ru/webdizajn/kak-sdelat-pomenyat-fon-na-sajte.html

Красивый фон для сайта

Все о фоне сайта – сделайте свой сайт красивым и уникальным!

Фон для сайта – довольно важный элемент любого дизайна.

Особенно это замечают те люди, у которых большое разрешение монитора, ведь если в среднем ширина любого блога порядка 1000 пикселей, то при разрешении экрана 1920×1080 – 920 пикселей будет занимать задний фон сайта – по 460 пикселей с одной и с другой стороны, довольно большое пространство, и над ним стоит поработать!

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

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

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

Итак, три вида фона сайта:

  1. Обычный цвет. Чаще всего используется белый (#fff), либо тот, который лучше подойдет и дополнит цветовую схему блога.
  2. Небольшая картинка, которая дает бесшовный фон. Здесь для фона используется картинка небольшого разрешения, которая повторяется по всей “фоновой” ширине и высоте. Но изображение должно быть не совсем обычное – любое не подойдет, так как мы будем достигать бесшовного эффекта – об этом ниже.
  3. Большая картинка + фоновый цвет. Эффектный прием, который выделит Ваш блог из многих и при грамотном подборе изображения произведет приятное впечатление на посетителя и обязательно задержит его на сайте.

Для того чтобы поставить или поменять фон на сайте нам потребуется отредактировать файл стилей style.css. Применять различные виды фона я буду на сайте http://kakje.ru/ на котором установлен WordPress и пошагово описывать свои действия.

Прежде всего нам нужно найти этот файл. Для этого заходим в админку, наводим на вкладку “Внешний вид” и нажимаем “Редактор”:

  1. Убеждаемся что для редактирования открыт файл style.css взглянув на правый нижний угол страницы.
  2. Находим стили для общего блока страницы: слово body.

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

Как изменить фоновый цвет сайта

Сложность: Легкая.

Изначально сайт выглядит вот так:

  • При отсутствии прописанного стиля background – фон по умолчанию белый;
  • Если у Вас уже прописан background, то просто замените его (удалите и пропишите заново). Предварительно скопируйте его в блокнот!

Теперь давайте попробуем изменить фоновый цвет. Для этого дописываем с стилях body вот эту строчку с кодом цвета:

background:#c9ccff;

Дополнительная картинка, чтобы не возникло трудностей:

И теперь наш сайт выглядит вот так:

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

Картинка для фона сайта – бесшовный фон

Сложность: Средняя.

Пример бесшовного фона сайта Вы можете посмотреть на этом блоге. Для фона используется вот такая картинка, которая повторяется по осям X и Y:

Принцип картинки для такого фона: если к ней вплотную подставить справа и снизу такую же, то будет осуществлен плавный переход (без шва):

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

Чтобы использовать картинку в качестве фона первое что нужно сделать – это закачать ее на свой хостинг – обязательно! и узнать путь до нее, а затем прописать в стилях body эту строчку (со своим путем до картинки!):

background:url(«http://путь_до_картинки»);

Дополнительное пояснение:

И теперь наш сайт выглядит вот так:

Красивый фон для сайта – большая картинка + фоновый цвет

Сложность: Средняя.

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

Обратите внимание на то, что данная картинка плавно перетекает слева, справа и снизу в однотонный цвет. Через фотошоп я посмотрел, что код этого цвета: #e7daae – его то и будем применять как основной в том месте, где заканчивается картинка.

После нескольких вариаций я получил вот такой фон:

Для такого отображения я дописал в файл style.css следующие строки:

background:url(«http://путь_до_картинки») no-repeat center top #e7daae;

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

Источник: http://history-of-blog.ru/dizajn/krasivyj-fon-dlya-sajta-kak-sdelat-postavit-ili-pomenyat/

Как сделать видеофон для лендинг пейдж

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

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

Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза.

(Кстати, об оптимизации css кода можно почитать в этой статье)

Итак примеры:

eagleadventuretours.de

webuildrail.com

daarnhouwer.com

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

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

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

Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим…

Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы — вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.

Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.

Html разметка

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

Smartlanding

<\p>

Css разметка

Для того, чтобы видео занимало всю ширину экрана и фон был неизменным на всем сайте — добавьте следующие стили: video{ position:fixed; z-index:-1; min-width:100%; min-height:100%; overflow:hidden; } p{ font-family: 'courgette'; color:#fff; font-size: 80px; text-align: center; padding-top: 20%; text-shadow: 0 1px 1px #000a33; }<\p>

Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

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

Скачать исходник

Источник: https://smartlanding.biz/kak-sdelat-video-fon-dlya-lending-pejdzh.html

Фон для сайта: как выбрать и где скачать?

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

  Данная тема оказалась очень востребованной, но почему то я ранее так и не добрался до написания статьи…

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

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

Сразу хочется отметить, что я не профессиональный веб-дизайнер, не маркетолог и не психолог, чтобы уметь закрытыми глазами определить подойдет ли данный цвет к остальным элементам сайта или нет, но те вещи, о которых я сейчас буду говорить на самом деле банальны и их должен знать каждый! Почему? Дело в том, что дизайн сайта — это одно из главных составляющих, на которое обращает посетитель при первом же визите! Как говорят: встречают по одежке, а провожают по уму! Ну что ж приступим…

Как подобрать фон для сайта?

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

Источник: https://SeoKos.ru/blogging/nastrojka-bloga/fon-dlya-sajta-kak-vybrat-i-gde-skachat.html

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