Фон для сайта или Background для сайта |
Фон для сайта или background for site - это одно и тоже, просто на разных языках. В этой заметке я предлагаю разобраться с четырьмя наиболее распространенными способами создания фона для сайта или как говорят в народе background для сайта. Следует отметить, что если вы только начинаете делать свои первые шага на пути познания верстки сайтов, то эти четыре способа создания фона для сайта, будут безусловно вам полезны. Мы рассмотрим все четыре способа создания Background’а (фон для сайта) детально, а именно:
Фон для сайта из одного цвета
По умолчанию браузер присваивает сайту фон белого цвета. Изменить его на другой достаточно просто. Самый простой вариант - использовать атрибут bgcolor в теге body, например:
<body bgcolor="#83C5E9">
Также вы можете указать цвет фона сайта, через соответствующее CSS-свойство, указав его в отдельном файле таблицы сталей (например style.css) или в приделах тега style, в HTML-коде страницы. Например:
body {
background-color: #83C5E9; /*цвет фона*/
}
Следует отметить, что эти два способа можно, условно говоря, "объединить". Для этого можно использовать атрибут style у того же тега body. Например:
<body style="background-color: #83C5E9;">
Прописанное CSS-свойство background-color задает цвет фона для сайта. В нашем примере - это синиц цвет, имеющий код #83C5E9.
Фон для сайта из текстуры
Фон из текстуры является популярным способом для создания фона для сайта. Текстуры бывают разные, со сложными или простыми узорами, яркие и блеклые. Как же нам установить текстуру в качестве фона для сайта? Все что нам нужно сделать, это подключить нашу текстуру с помощью атрибута background в теге body, например:
<body background="images/bg.jpg">
Также мы можем использовать CSS-свойство background-image, например:
body {
background-image: url('images/bg.jpg'); /*текстура в качестве фона сайта*/
}
Обратите внимание, что адрес к текстуре прописан в url('') - это важно. В обоих случаях, текстура будет повторяться по оси x и оси y, так она заполнит всю нашу страницу. Но для перестраховки еще допишем и цвет фона (текстура у нас зеленая, поэтому логично и цвет фона сделать зеленым #537759).
body {
background-color: #537759; /*цвет фона*/
background-image: url(images/bg.jpg); /*подключаем текстуру*/
}
Фон для сайта с помощью градиента
Подключенное изображение с помощью атрибута background или CSS-свойства background-image может повторяться по оси x и y. Использование повтора изображения по оси х обычно используется для того, чтобы добавить градиент к какому-нибудь веб-элементу, например, для фона кнопок.
Поэтому мы создаем 1px (по ширине) линию с градиентом, это и будет наш фон для сайта. Сначала для страховки прописываем цвет фона background-color: #83C5E9; затем подключаем нашу градиентную линию, и с помощью CSS-свойства background-repeat: repeat-x; заставляем нашу 1px линию повторяться только по оси x. У меня на скриншоте изображена большая градиентная линия, так делать не нужно, она должна быть 1px по ширине.
body {
background-color: #83C5E9; /*цвет фона*/
background-image: url(images/bg.jpg); /*подключаем градиент*/
background-repeat: repeat-x; /*градиент повторяться по оси x*/
}
Большой фоновое изображение
Суть этого способа состоит в том, что загружается большое фоновое изображение, которое размещается по центру экрана и прикрепленное к верху. Но не забывайте оптимизировать ваше изображение для того, чтобы страница загружалась быстрее, самое лучшее это фоновое изображение из векторной графики. Все комментарии в коде.
body {
background-color: #000000; /*цвет фона*/
background-image: url(images/bg.jpg); /*подключаем изображения*/
background-position: center top; /*позиция изображения, по центре екрана, прижатый к вверх*/
background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/
}
| Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |
