Пособие для начинающих по позиционированию фона в css

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

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

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Средние изменения дизайна – изменяем CSS

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

Для изменения CSS можно использовать плагин Simple Custom CSS или CSS Editor, который является частью Jetpack.

Перво-наперво, вам необходимо почерпнуть базовую информацию о том, что такое HTML/CSS, узнать, как это работает, как найти класс или элемент, который вы хотите изменить. Чтобы например, в Хроме подсветить область, которую вы хотите просмотреть, нажмите на правую кнопку мыши, а потом на «Посмотреть код». В нашем примере мы рассмотрим HTML и CSS, присущие заголовку записи.

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

В этом примере есть медиа-запрос, который говорит:

@media screen and (min-width: 61.5625em)

И он задает следующие стили для .entry-title.

font-size: 40px;
font-size: 2.5rem;
line-height: 1.225;
margin-bottom: 1.05em;

Это значит, что данные стили применяются только если экран (или окно браузера) шире, чем 61.5625em (или 985px). Так что, если вам нужно поменять то, как что-то выглядит на определенном экране, то вам нужно включить специфичный медиа-запрос. Давайте изменим размер шрифта только для экранов мониторов. Для этого напишите что-то подобное в вашем кастомном CSS плагине:

@media screen and (min-width: 61.5625em) {
.entry-title {
font-size: 200px;
}
}

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

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

CSS background-image — фоновая картинка на сайте

Свойство CSS background-image — позволяет установить фоновое изображение на сайте.

Синтаксис CSS background-image

Например, для установки общего (глобального) фона:

Например фоновая картинка:

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

В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).

Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS

background-repeat
background-attachment
background-position
background-size
background-clip

Рассмотрим в отдельности эти параметры

4.1. CSS background-repeat

Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.

Синтаксис CSS background-repeat

Где value может принимать следующие значения:

repeat-x — повторять фоновое изображение по горизонтали;
repeat-y — повторять фоновое изображение по вертикали;
no-repeat — не повторять фоновое изображение;
repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;

Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:

4.2. CSS background-attachment

Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.

Синтаксис CSS background-attachment

Где value может принимать следующие значения:

scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
fixed — при прокрутке скролла фон остается неизменными;
local — изображение прокручивается с контентом, но не с элементом, его содержащим;

Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.

4.3. CSS background-position

Свойство CSS background-position задает расположение фона относительно левого верхнего угла.

Синтаксис CSS background-position

В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value, value2 может принимать следующие значения:

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

По умолчанию фон располагается в верхнем левом углу.

Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:

Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.

Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.

Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.

4.4. CSS background-size

Свойство CSS background-size позволяет задавать размеры фона.

Синтаксис CSS background-size

Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.

Так же может принимать два статичных параметра

contain — масштабирует изображение по длинной стороне (заполняет все пространство)
cover — масштабирует изображение по короткой стороне (заполняет все пространство)

Напоследок запишем все атрибуты вместе:

Для обращения к float из JavaScript нужно писать следующую конструкцию:

Добавление цвета фона

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

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

Прозрачный фон

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

К счастью, есть простой способ обеспечить запасной вариант для фона. CSS каскадирует с верхней части файла до его низа, таким образом, мы можем использовать два свойства background-color в едином наборе правил. Первое свойство background-color будет включать «безопасный» цвет фона в виде шестнадцатеричного значения, а второе свойство background-color будет использовать RGBa или HSLa. При этом, если браузер понимает значение RGBa или HSLa, то отобразит его, а если нет, то вернётся к шестнадцатеричному значению перед ним.

Как создать липкую боковую панель в CSS

Прикрепленные боковые панели похожи на фиксированные боковые панели в том, что они следуют за вами при прокрутке страницы.

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

Это заставляет его «прилипать» к верхней части экрана, например:

Чтобы добиться эффекта липкой боковой панели, используйте следующие HTML и CSS:

В этом коде объявление position: sticky сообщает div боковой панели о необходимости «прилипать» к верхней границе его родительского контейнера, которым здесь является область просмотра.

Возможные проблемы

На сегодняшний день фоновые изображения в CSS дают нам удобный способ создания
отзывчивых изображений, однако этот подход не идеален. Его основная часть
нарушает один из фундаментальных принципов веб-стандартов: разделение содержания
и представления. Более продвинутые приёмы, применяемые для улучшения этого
подхода, не полностью поддерживаются браузерами. Кроме того, этот подход не
решает некоторые глубокие проблемы отзывчивых изображений в целом.

Разделение стиля и содержания

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

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

К сожалению, с этой проблемой ничего не поделаешь

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

Поддержка масштабирования изображений в браузерах

Как было отмечено выше, улучшения, добавленные для масштабирования изображений, не
будут работать в Internet Explorer 8 и старше. Соответствующие стандартам
подходы, вроде использования , возможно, совместимы со старыми версиями
браузеров, тем не менее, как известно, сам на данный момент не
поддерживается ни одним из популярных браузеров.

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

Серьезная проблема контекста пользователя

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

Представьте, например, что пользователь ноутбука
подключается к интернету через точку доступа Wi-Fi на смартфоне.

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

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

Благодарности

Большое спасибо Грейди Кунлайну за то, что он первым описал как можно с
помощью стилей сделать изображения масштабируемыми с сохранением пропорций.
Вебсайт contfont.net, который используется в этой статье в качестве
примера можно найти на github.

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

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

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

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

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

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

PHP

1	<table bgcolor=»#сссссс»>

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

PHP

1	<table background=»images/bg.jpg»>

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

Лучше и эффективнее воспользоваться CSS.

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

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

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

PHP

background:blue;

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

PHP

background:# 013C74;

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

PHP

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

1 backgroundrgba(255,255,255,0.5);

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

Ранее я уже посвящала несколько статей теме задания цветов, их значений и определению цвета на сайте. Уверена, что они могут вам пригодиться. Вот ссылки:«Изменение цвета шрифта в CSS. Коды цветов HTML и CSS»«Как определить цвет на сайте»«Как в html изменить цвет текста?»

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

На практике

Мы сделаем новую полосу с градиентом с помощью класса row-alt. Поскольку для новой полосы задано то же свойство и значение min-width что и для класса row, мы объединим эти два селектора.

Далее мы хотим создать новый набор правил и применить стили специально к классу row-alt. Эти новые стили будет включать в себя градиентный background, который начинается с зелёного цвета и переходит к жёлтому, слева направо.

Используя функцию linear-gradient() с соответствующими значениями и вендорными префиксами, мы добавим градиентный background для класса row-alt. Также включим один background перед градиентным background как запасной вариант, на тот случай, если браузер не поддерживает градиенты.

Наконец, мы также добавим и некоторый вертикальный padding. Наш обновлённый раздел теперь выглядит следующим образом:
Стили row-alt на месте, давайте воспользуемся ими на всех наших внутренних страницах. В данный момент все они содержат элемент <section> с классом container. Затем, внутри каждого <section> есть элемент <h1>, содержащий заголовок страницы.

Мы собираемся изменять эти элементы <section> так же, как мы сделали раздел с тизером на главной странице. Мы обернём каждый элемент <section> с классом container элементом <section> с классом row-alt. Затем изменим каждый элемент <section> с классом container на элемент <div> для лучшего соответствия семантики.

Каждая из наших внутренних страниц должна теперь включать в себя следующее:
Раз мы обновляем наши внутренние страницы, давайте сделаем у них вступление чуть более привлекательным. Начнём с добавления вступления на каждой странице немного ниже <h1> в каждом элементе <section> с классом row-alt. Наша страница speakers.html, к примеру, теперь может включать следующий раздел:
Дополнительно со вставкой абзаца также изменим некоторые стили в разделе со вступлением. Чтобы сделать это, мы добавим класс lead к элементу <div>, который уже содержит класс container. Он может быть найден внутри элемента <section> с классом row-alt. Наше вступление для каждой внутренней страницы теперь будет выглядеть так:
После того, как класс lead находится на своём месте, мы выровняем по центру весь текст внутри этих элементов <div>. Также увеличим font-size и line-height у всех абзацев в этих <div>.

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

Рис. 7.03. Страница Спикеры сайта Styles Conference, в комплекте с градиентом

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или
Скачать исходный код

Свойства фона CSS

Перечислим основные свойства для стилизации фона и их значения

background-color (цвет фона)

Возможные значения:

(название)
(код RGB)
(шестнадцатиричный код)
(прозрачность)

Пример:

h5{background-color#ff0000}
p{background-colorrgb(,100,)}

Результат:

Это пример параграфа

Это пример заголовка

background-image (фоновое изображение)

Возможные значения:

(url-адрес)
(без фонового изображения)

Изображение тиражируется по всему экрану.Пример:

p{background-imageurl('https://labs-org.ru/wp-content/uploads/2016/05/logo.png')}

Результат:

background-repeat (повторение фона)

Возможные значения:

(Фоновый рисунок повторяется только по горизонтали)
(Фоновый рисунок повторяется только по вертикали)
(изображение без повторений)

Пример:

p{background-imageurl('https://labs-org.ru/wp-content/uploads/2016/05/logo.png');
background-repeatrepeat-y}

Результат:

Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа.

background-position (позиционирование фона)

Возможные значения:

(координаты)
(по левому и верхнему краю)
(слева и по центру)
(слева и по нижнему краю)
(справа и по верхнему краю)
(справа и по центру)
(справа и по нижнему краю)
(центр по горизонтали и верхний край)
(центр по горизонтали и по вертикали)
(центр по горизонтали и нижний край)

Пример:

p{
  background-imageurl('https://labs-org.ru/wp-content/uploads/2016/05/logo.png');
  background-repeatno-repeat;
  background-positionright top;
}

Результат:

background-attachment (прокрутка фона)

Возможные значения:

(прокрутка вместе с содержимым)
(делает изображение неподвижным)

Пример:

textarea{
background-imageurl('https://labs-org.ru/wp-content/uploads/2016/05/logo.png');
background-attachmentfixed
}

Результат:

Это пример текста для свойства background-attachment. Это пример текста для свойства background-attachment. Это пример текста для свойства background-attachment. Это пример текста для свойства background-attachment. Это пример текста для свойства background-attachment.

Как создать складную боковую панель в CSS

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

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

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

Background как свойство в каскадных стилевых таблицах

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

Параметры	Предназначение
background-attachment	Используется для установки фиксированного или прокручиваемого изображения вместе с контентом сайта. Бывает fixed, scroll и inherit
background-image	Задает изображение фона. Может указываться одновременно с цветом. Тогда последний будет отображаться, пока полностью не загрузится картинка
background-position	Задает начальное расположение объекта для предыдущего параметра. Горизонтально указывается right, left и center, а по вертикали – bottom, top и center. Помимо этого, можно наследовать положение (inherit), задавать в процентах, пикселях и других размерностях
background-repeat	Применим при использовании атрибута background-image. Регламентирует, каким образом будет повторяться изображение. Можно указывать 2 значения: для горизонтали и вертикали. Существуют такие характеристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space
background-color	Устанавливает цвет заднего плана из палитры. Цвет наследника всегда совпадает с цветом элемента-предка.
inherit	Наследует все характеристики родительского элемента