Неподвижный фон. Делаем неподвижный фон в SharePoint Designer
При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей. Как здесь:
Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью
постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением.css
Есть несколько способов установить то, что нам нужно.
1-й способ.
Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):
В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:
BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}
В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).
Примечание:
Если у вас нет документа стилей css, то вам необходимо создать его, как указано в - и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.
Итак, вот какие параметры мы задаём при помощи стилей:
Background-image: url(адрес картинки фона); - прописываем адрес нашей фоновой картинки 1280 на 1024 px.
Background-attachment: fixed; - задаём фону указание оставаться фиксированным, то есть, неподвижным.
Background-repeat: no-repeat; - задаём фону указание не размножаться.
Background-position: top; - задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.
Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:
BODY{background-image: url(адрес картинки фона); background-attachment: fixed; background-repeat: no-repeat; background-position: top;}
Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).
2-й способ.
Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:
При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:
BODY {background-image: url(адрес картинки фона); background-attachment: fixed; }
Здесь мы задали только параметр: background-attachment: fixed; - то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке "не размножаться" - она должна у нас размножиться на весь экран.
3-й способ.
Попробуем установить фоновую картинку с одной стороны, а таблицу с текстом и картинками на странице расположить с противоположной стороны, чтобы она не загораживала собой фоновую картинку. Для этого пропишем в документе css следующее:
BODY { background:#e0ddd8 url(адрес картинки фона) no-repeat fixed left top }
Background:#e0ddd8 url(адрес фоновой картинки) - цвет под фоновой картинкой - бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).
No-repeat - картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров - Робертом Дювалем).
Fixed - фон зафиксирован, то есть неподвижный.
Left top - выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта - слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете:
И теперь осталось только доделать в нем некоторые мелочи, чтобы можно было его размещать в Интернете. Например, если Вы откроете в браузере, то увидите, что в закладке окна отображается название Без названия 1
. Давайте напишем что-то более осмысленное.
Запустите SharePoint Designer
, затем откройте в нем файл index.html
своего . Нажмите в селекторе тэгов на элемент
правой клавишей мыши, и выберите Свойства тэга
. Во вкладке Общие
в поле Название
Вы и увидите эту надпись Без названия 1
. Измените название на свое, по теме Вашего одностраничного сайта и сохраните изменения. Обновите одностраничный сайт в браузере, и Вы увидите, что это название отобразится в закладке браузера.
Там же, где Вы изменяли название, Вы можете добавить описание и ключевые слова. Описание будет видно, если Ваш одностраничный сайт
отобразится в выдаче поисковика по каким-то ключевым фразам, а если Вы пропишете ключевые слова, то Ваш сайт будет лучше по ним продвигаться. Ключевые фразы
прописывайте через запятую, не больше трех, с релевантностью около 100 показов в месяц. Подобрать
ключевые фразы
Вы можете на сервисе wordstat.yandex.ru
Нужно также сделать так, чтобы самая главная ключевая фраза, та, которая в списке идет первая, встречалась несколько раз в тексте и заголовках Вашего одностраничного сайта.
Во вкладке Форматирование
Вы можете изменить цвет фона и текста по умолчанию, поставить картинку фона.
Также Вы можете настроить цвет ссылок: например. сделать так, чтобы цвет ссылки изменялся при наведении на нее мышкой. Для этого в поле Ссылка
под указателем мышки измените цвет, только берите цвет, отличный от цвета Авто
, иначе ничего не изменится. Чтобы проверить изменения, обновите Ваш одностраничный сайт в браузере, и наведите мышкой на ссылку.
В SharePoint Designer
можно изменять отображение Вашей страницы. Всего есть три варианта отображения: Конструктор, С разделением и Код
. Эти варианты Вы можете выбрать в пункте меню Вид — Страница
. Также эти варианты видны внизу, под рабочей областью программы SharePoint Designer.
По умолчанию стоит вид Конструктор
, и Вы видите свой одностраничный сайт примерно так, как он отображается в браузере.
Если Вы выберете С разделением
, то увидите и код. и его отображение в браузере одновременно.
Если Вы выберете Код
, то увидите html-код
Вашего сайта, и сможете его редактировать напрямую.
Решил я тут недавно на одном из своих сайтов сделать легкий редизайн. И дошло дело до фона. Показался он мне каким-то скучным. Захотелось его немного «оживить». Подобрал подходящую картинку небольшого размера, загнал ее в свойство фона:
Body{
background: url("../images/bg.jpg") no-repeat center center / cover fixed;
}
И довольный нажал F5. Красота, да и только!
Начал скроллить страничку вниз и чувствую, что-то не то…
Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?
Я начал свое расследование…
Сначала я погрешил на свойство cover , но дело оказалось не в нем. Отключив фиксированное положение фона (убрав fixed), мой «Crysis» выдал мне больше 30 FPS
! «Во дела...», подумал я. Как же так? Почему? Почему я не замечал этого раньше? Возможно, это не очень заметно на легковесных сайтах, где не так много html элементов.
А дело оказалось вот в чем. Использование background-attachment: fixed каждый раз при прокрутке вызывает операцию перерисовки. Страница должна переместить свое содержимое. И когда дело доходит до фиксированного фона, браузер должен заново прорисовать картинку в новом месте, относительно существующих DOM-элементов.
Чтобы решить эту проблему, нашему фоновому изображению нужен свой элемент, чтобы оно могло двигаться независимо от других. А также нам понадобится CSS3-свойство will-change . О нем речь пойдет ниже.
Как только мы решим проблему с прорисовкой, скроллинг уже не будет проходить у нас рывками. Так как фон будет лежать на своем собственном слое, больше не потребуется перерисовывать страницу каждый раз при прокрутке.
Давайте я покажу все на примере.
Это наш изначальный код (я развернул свойства для наглядности):
Body{
background: url("../images/bg.jpg") no-repeat center center;
background-attachment: fixed;
background-size: cover;
}
А вот, что нам необходимо сделать для решения проблемы:
Body{
position: relative;
}
body::before {
background: url("../images/bg.jpg") no-repeat center center;
background-size: cover;
content: " ";
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
Мы добавили position: relative для элемента body , чтобы затем спозиционировать псевдо-элемент, который будет отдельным слоем для нашего фона. Остальные свойства, касательно фона, мы перенесли в::before . У псевдо-элемента мы теперь используем position: fixed , вместо прежнего background-attachment: fixed у body . Ну и самое важное, без чего вся затея потерпит крах, - это свойство will-change .
Свойство will-change предписывает браузеру отображать элемент, независимо от окружающих его других элементов. Оно как бы говорит браузеру: «Эй, друг, этот элемент изменится когда-нибудь потом, в будущем, так что прорисуй его только один раз на его собственном слое. И не нужно учитывать остальные элементы - он сам по себе».
Такие вот дела.
Данный билд я протестировал в разных браузерах, и вот небольшое резюме:
- Google Chrome. Все ОК, работает как часы.
- Mozilla Firefox. Все ОК, работает как часы.
- Opera. Все ОК, работает как часы.
- Safari. Все ОК, работает как часы. За проверку спасибо
- Microsoft Edge. Метод работает, но есть один косяк. Если крутить колесиком, то дергается верх и низ страницы, но потом приходят в норму. Если же крутить с помощью скроллбара, то все ОК.
- Internet Explorer. Та же проблема, что и у Edge.