- В различных браузерах функции градиента реализованы по-разному, поэтому нужно добавить несколько версий кода.
-
Создайте направленный градиент. Если вы не хотите, чтобы градиент шел по вертикали, укажите направление перехода цветов. Для этого введите следующий код между тегами :
html { min-height : 100 % ; } body { background : -webkit- linear-gradient (left , #93B874 , #C9DCB9 ); background : -o- linear-gradient (right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- Если хотите, переставьте слова «left» (влево) и «right» (вправо), чтобы поэкспериментировать с разными направлениями градиента.
-
Используйте другие свойства для настройки градиента. С ним можно сделать больше, чем кажется.
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
background : linear-gradient (# 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- Добавьте прозрачность к цвету. В этом случае он будет постепенно затухать. Чтобы добиться эффекта затухания, используйте один и тот же цвет. Чтобы задать цвет, понадобится функция rgba() . Последнее значение определит прозрачность: 0 - непрозрачный цвет и 1 - прозрачный цвет.
background : linear-gradient (to right , rgba (147 , 184 , 116 , 0 ), rgba (147 , 184 , 116 , 1 ));
- Например, после каждого цвета можно ввести число в процентах. Так вы укажите, какое пространство будет занимать каждый цветовой сегмент. Вот пример кода с такими параметрами:
Найдите заголовок «html». Он должен быть в верхней части документа.
Запомните основной синтаксис этого процесса. Чтобы создать градиент, необходимо знать две величины: начальную точку/угол и ряд цветов, которые будут переходить один в другой. Можно выбрать несколько цветов, чтобы они переходили друг в друга; также можно задать направление или угол перехода.
background : linear-gradient (направление / угол , цвет1 , цвет2 , цвет3 и так далее );
Создайте вертикальный градиент. Если не задать направление, градиент будет идти сверху вниз. Чтобы создать такой градиент, введите следующий код между тегами :
html { min-height : 100 % ; } body { background : -webkit- linear-gradient (#93B874 , #C9DCB9 ); background : -o- linear-gradient (#93B874 , #C9DCB9 ); background : -moz- linear-gradient (#93B874 , #C9DCB9 ); background : linear-gradient (#93B874 , #C9DCB9 ); background-color : #93B874 ; }
Просмотрите код. Код для создания цветового градиента в качестве фона веб-страницы будет выглядеть примерно так:
< html > < head > < style > html { min-height : 100 % ; } body { background : -webkit- linear-gradient (left , #93B874 , #C9DCB9 ); background : -o- linear-gradient (right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient (right , #93B874 , #C9DCB9 ); background : linear-gradient (to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; } < body >
Всем привет! На связи с вами ваш покорный слуга с порцией полезного и практического материала на тему как установить фон для сайта. Это самое начало в html верстке и здесь я наглядно продемонстрирую на примере как можно сделать красивый фон для сайта, который однозначно зацепит интернет пользователя и придаст оригинальности.
Если вы обратили внимание, то большинство интернет бизнесменов используют в своих продающих страницах и страницах подписки уникальный фон. Вот сегодня мы разберем техническую составляющую этого процесса.
Итак, для начала нам нужна, конечно же, картинка. В зарубежном интернете есть один очень хороший сайт на котором вы можете скачать бесплатно разные картинки для фона сайта . Их там просто огромное множество. Сайт называется Subtle Patterns.
Он отображается в списке поисковика Гугл на первом месте поэтому в работе рекомендую именно его. Также вы можете найти большое количество других сайтов если наберете в поисковике примерно такие словосочетания «background image patterns», «download background image for site» и так далее.
У кого с английским языком проблем нет, то вы разберетесь без труда.
В этой статье я выбрал тему и называется она tweed. Скачать вы можете ее .
Вот как она выглядит в небольшом варианте на сайте
В начале создаем новый документ в программе
И обязательно перед его редактированием сохраняем под именем, например 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 документ. Вот как это делается
Прямо целиком вводим всю строку над . Этой строкой мы подключаем нашу таблицу стилей.
Теперь мы для нашего тега body определим фоновую картинку через таблицу стилей. Для этого мы в документе style.css создаем следующую структуру (прямо также берете и пишите в коде программы)
Здесь немного поясню. У атрибута background есть много значений, одно из которых background-repeat, которое отвечает как раз за то, чтобы растянуть нашу фоновую картинку для веб документа.
BACKGROUND-REPEAT:
REPEAT //(растиражировать по горизонтали и вертикали) REPEAT-X // (растянуть только по горизонтали) REPEAT-Y //(растянуть только вертикали) NO-REPEAT //(не повторять фоновую картинку)
В нашем случае мы нашу маленькую картинку тиражируем и по вертикали и по горизонтали. В результате чего вся страница оказывается заполненной нашим изображением. Вот как это выглядит в итоге в браузере:
Также специально для вас сделал подборку сайтов где вы можете скачать красивый фон для сайта
В html фон для сайта не задают, это пишется через css-стили, но это лишь теоретическая формальность. А теперь давайте узнавать, как этот фон определять.
Фон для сайта или отдельного блока
Поскольку для осуществления этой цели нам нужен css-файл, его нужно создать и подключить к html. Об этом написано в этой статье . После этого можно приступать к работе. Во-первых, вам нужно определиться с тем, чему вы хотите задать фон. Если всей странице в целом, то сделать это можно так:
Body{
Background-color: white;
}
То есть мы обращаемся к тегу body , который представляет всю нашу страничку. Для задания цвета фона используется свойство background-color . Но что, если вам нужно задать в качестве фона рисунок, а не сплошной цвет? Тогда стоит написать так:
Body{
Background-image: url(путь к рисунку.расширение рисунка)
}
Для наглядности я предлагаю рассмотреть все подробнее на примере. Для этого я буду использовать такую картинку:
Например, background-image: url(comp.png) . В этом примере мы задали фоновую картинку с именем comp (именно так я ее назвал) формата png, которая лежит в той же папке, что и css-файл.
В html создам произвольный блок с конкретными размерами, чтобы на нем демонстрировать работу css-свойств.
И вот для него стили:
#ct{
Background-image: url(comp.png);
width: 600px;
height: 400px;
}
Вот что у нас получилось:
Почему так? Дело в том, что по умолчанию браузер повторяет картинку столько раз, чтобы полностью заполнить блок. Иногда так и нужно, например, при использовании бесшовных орнаментов, но в нашем случае должна быть одна картинка. К счастью, этим можно очень легко управлять.
Повторение фона
Если у вас картинка в качестве фона, то по умолчанию она будет повторяться по горизонтали и вертикали, чтобы заполнить все пространство страницы. Чтобы это убрать, используется свойство background-repeat и его значение no-repeat (не повторять). Также есть такие значения:
- Repeat-x – повторять только по горизонтали
- Repeat-y – только по вертикали
Допишем в свойства нашему графическому фону:
Background-repeat: no-repeat;
Позиция
Свойство background-position определяет место, где будет находиться картинка. Здесь задается два значения – по горизонтали и вертикали. Примеры: background-position: right bottom – позиция в правом нижнем углу, top-left – в нижнем верхнем (и так по умолчанию), 250px 500px – смещение от левого верхнего угла вправо на 250 пикселей и вниз на 500.
Давайте лучше посмотрим на примерах:
Background-position: top right;
Картинка переместиться в верхний правый край. Я дал блоку также желтый фон, чтобы были видны его края.
background-position: 50% 50%;
Изображение появилось ровно по центру в своем блоке. Да-да, такое тоже возможно благодаря процентной записи позиции.
background-position: 70% 20%;
Фон смещен на 70% по горизонтали, и на 20 по вертикали.
Разрешается также в пикселях задавать отрицательное значение позиции. Это допустимо делать, например, когда вы используете большую картинку-спрайт и нужно поставить в блок нужную часть этого спрайта.
Закрепление фона
Еще мне очень нравится одно свойство, которое называется background-attachment . У него есть всего два значения и первое стоит по умолчанию (scroll). Это означает, что при прокрутке страницы фон тоже будет прокручиваться, а если вы используете картинку без повторений, то в конце концов она закончиться и дальше пойдет просто сплошной цвет.
Чтобы этого не случилось, прописывается background-attachment: fixed и теперь наш фон надежно зафиксирован на месте. Это можно сравнить с тем, как блоку определить фиксированное позиционирование и он не будет исчезать со страницы при ее прокрутке.
Сокращенная запись всего этого добра
Мы с вами разобрали много свойств, которые позволяют сделать фон, но если их все применять, то получается громоздкая запись. Есть очень элегантное решение. Свойство background позволяет через пробел записать нужные настройки в таком порядке:
Background: цвет изображение повторение закрепление позиция;
И теперь все можно записать так:
Background: yellow url(comp.png) no-repeat 20% 100px;
Если какое-то свойство определять не нужно, то оно просто опускается (в нашем случае мы не записали background-attachment).
Много фонов
А что делать, если вам нужно несколько фоновых картинок? Бывает, что ж поделать. Сегодня css поддерживает такую возможность. Давайте и мы попробуем. Возьмем такую иконку
Я назвал ее laptop.
И вот код для вставки мультифона:
Background: url(comp.png) no-repeat 20% 100px,
url(laptop.png) no-repeat 50% 50%;
background-color: yellow;
Как видите, достаточно всего лишь поставить запятую после первого изображения и прописать настройки для второго. Сплошной цвет в этом случае лучше задать отдельно.
Таким же образом можно записать еще сколько угодно картинок, но не переусердствуйте – слишком много графики это не очень хорошо.
Вот на этом мне бы хотелось закончить эту статью. С фоном можно делать еще много других интересных вещей, о них постараюсь писать в будущем (а кое-что уже написал – например, ). Успешного вам изучения этого свойства.
Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.
Техника с использованием только CSS. Часть #1.
Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство min-height , чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.
Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации процентного значения свойства left и отрицательного значения для левого поля, чтобы центрировать фоновое изображение.
Вот код CSS:
Img.bg { /* Устанавливаем правила для заполнения фоном */ min-height: 100%; min-width: 1024px; /* Устанавливаем коэффициент пропорциональности */ width: 100%; height: auto; /* Устанавливаем позиционирование */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }
Работает в:
Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования.
IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
IE 9: Работает.
Техника с использованием только CSS. Часть #2.
Другой способ решить задачу - поместить строчный элемент на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height , сохраняя коэффициент пропорциональности.
#bg { position:fixed; top:0; left:0; /* Сохраняем коэффициент пропорциональности */ min-width:100%; min-height:100%; }
Однако так изображение не центрируется. Поэтому обернем изображение в элемент
#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }
Работает в:
Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).
IE 8+.
Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).
Используем jQuery
Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только
свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только
свойству изображения height значение 100%.
#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }
$(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Работает в:
IE7+ (с заглушками, вероятно, будет работать и в IE6)
Во всех остальных браузерах.
Заключение
Любой из методов решения имеет свои достоинства и недостатки. Нужно просто выбрать подходящее для конкретного случая. Ну, или предложить свое.
Откройте файл вашей страницы HTML для редактирования в используемом вами редакторе. Для этого вы можете кликнуть правой клавишей мыши на документе и выбрать раздел «Открыть с помощью».
Структура HTML-файла представляет собой ряд дескрипторов различного уровня и назначения. Код страницы обычно начинается с тега . После него обычно идет секция
, в которой указывается заголовок страницы и код CSS. После закрытия дескриптора начинается тело страницы . Атрибут для задания фонового рисунка страницы выставляется в качестве дополнительного параметра background для данного тега. Код для создания фона страницы будет выглядеть следующим образом:При этом путь до картинки может представлять собой URL (начиная с http://). Размещение может быть задано с корневой директории (/root/folder/background.jpg), так и относительно местоположения редактируемого документа HTML (например, folder/background.jpg).
Сохраните произведенные изменения и откройте страницу в браузере. Для этого кликните правой клавишей мыши и выберите «Открыть с помощью». В предложенном списке укажите наименование используемой вами программы для просмотра страниц в интернете. Если параметр background был задан корректно, вы увидите указанную ранее фоновую картинку. Если картинка не отображается, проверьте правильность указания атрибута background и путь до файла фона.
Параметр bgcolor
Чтобы задать цвет фона без картинки, вы можете воспользоваться директивой bgcolor. В качестве значения для данного атрибута вы можете указать название цвета на английском языке или использовать значение цвета в палитре HTML. Например:
Данный код задает странице синий фон. Если вы хотите задать оттенок цвета или более точный цвет, используйте значения HTML-палитры:
В данном случае #002902 является цветом, который необходимо придать странице.
Атрибуты CSS
Вы также можете задать фон при помощи кода CSS, прописанного в параметрах
:При помощи CSS вы можете указать и фоновый рисунок для страницы через background-image:
Использование CSS и HTML дает одинаковые результаты, однако задавая параметры отображения страницы предпочтительнее использовать CSS.
