Как сделать неподвижный фон. Делаем неподвижный фон в 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 в таблице вы пропишете:
Также Вы можете настроить цвет ссылок: например. сделать так, чтобы цвет ссылки изменялся при наведении на нее мышкой. Для этого в поле Ссылка
под указателем мышки измените цвет, только берите цвет, отличный от цвета Авто
, иначе ничего не изменится. Чтобы проверить изменения, обновите Ваш одностраничный сайт в браузере, и наведите мышкой на ссылку.
В SharePoint Designer
можно изменять отображение Вашей страницы. Всего есть три варианта отображения: 
Если Вы выберете Код
, то увидите html-код
Вашего сайта, и сможете его редактировать напрямую.
Загрузка...
