Большой фоновое изображение
Code
body {
background-color: #000000; /*цвет фона*/
background-image: url(images/bg-image.jpg); /*подключаем изображения*/
background-position: center top; /*позиция изображения, по центре екрана, прижатый к вверх*/
background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/
}
Суть этого способа, в том, что загружается большое фоновое изображение, которое размещается по центру экрана и прикрепленное к верху.
Но не забывайте оптимизировать ваше изображение для того, чтобы страница загружалась быстрее, самое лучшее это фоновое изображение из векторной графики. Все комментарии в коде.
Фон для сайта с текстуры
Code
body {
background-color: #537759; /*цвет фона*/
background-image: url(images/pattern.png); /*подключаем текстуру*/
}
Фон с текстуры является популярным способом для создания фона для сайта. Текстуры бывают разные, сложными и простыми узорами, яркие и простые, например, у меня на блоге фоном является текстура и с серого картона.
Все что нам нужно сделать, это подключить нашу текстуру с помощью css свойства background-image, и она автоматически будет повторяться по оси x и оси y, так она заполнит всю нашу страницу. Но для перестраховки еще допишем и цвет фона (текстура у нас зеленая, поэтому логично и цвет фона сделать зеленым #537759).
Фон для сайта с помощью градиента
Code
body {
background-color: #83C5E9; /*цвет фона*/
background-image: url(images/gradient.jpg); /*подключаем градиент*/
background-repeat: repeat-x; /*градиент повторяться по оси x*/
}
Подключенное изображение с помощью css свойства background-image может повторяться по оси x и y. Использование повтора изображения по оси х обычно используется, чтобы добавить градиент к какому-нибудь веб-элементу, например, для фона кнопок.
Поэтому мы создаем 1px по ширине линию с градиентом, это и будет наш фон для сайта. Сначала для страховки прописываем цвет фона background-color: #83C5E9; затем подключаем нашу градиентную линию, и с помощью css свойства background-repeat: repeat-x; заставляем нашу 1px линию повторяться по оси x.
У меня на скриншоте изображена большая градиентная линия, так делать не нужно, она должна быть 1px по ширине.
Покормить админа
