Фон для сайта или Background для сайта
5 декабря 2010 года, Размещено в категории: HTML / CSS
Фон для сайта или Background для сайта, это одно и тоже самое. Сейчас мы разберем четыре наиболее популярных метода создания фона для сайта или как говорят в народе background для сайта.
Если Вы только начинаете свое знакомство с версткой сайтов, то эти четыре метода создания фона для сайта, будут именно для Вас. Мы рассмотрим все четыре способа создания Background’а (фон для сайта) по детально, а именно:
- Фон с одного цвета
- Фон с текстуры
- Фон с помощью градиента
- Фон с большого изображения
Фон для сайта с одного цвета
1 2 3 | body { background-color: #83C5E9; /*цвет фона*/ } |
Браузеры по умолчанию сайтам надают фон с белого цвета. Но его можно очень легко сменить на другой. Заходим в файл style.css и к body (тело сайта) прописываем свойство background-color с помощью которого, мы и на дадим фон для сайта с другого цвета. Например свет синий, в HTML коде это будет #83C5E9
Чтобы узнать НTML код цвета используйте программу HTML colors 2000.
Фон для сайта с текстуры
1 2 3 4 | body { background-color: #537759; /*цвет фона*/ background-image: url(images/pattern.png); /*подключаем текстуру*/ } |
Фон с текстуры является популярным способом для создания фона для сайта. Текстуры бывают разные, сложными и простыми узорами, яркие и простые, например, у меня на блоге фоном является текстура и с серого картона.
Все что нам нужно сделать, это подключить нашу текстуру с помощью css свойства background-image, и она автоматически будет повторяться по оси x и оси y, так она заполнит всю нашу страницу. Но для перестраховки еще допишем и цвет фона (текстура у нас зеленая, поэтому логично и цвет фона сделать зеленым #537759).
Фон для сайта с помощью градиента
1 2 3 4 5 | 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 по ширине.
Большой фоновое изображение
1 2 3 4 5 6 | body { background-color: #000000; /*цвет фона*/ background-image: url(images/bg-image.jpg); /*подключаем изображения*/ background-position: center top; /*позиция изображения, по центре екрана, прижатый к вверх*/ background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/ } |
Суть этого способа, в том, что загружается большое фоновое изображение, которое размещается по центру экрана и прикрепленное к верху.
Но не забывайте оптимизировать ваше изображение для того, чтобы страница загружалась быстрее, самое лучшее это фоновое изображение из векторной графики. Все комментарии в коде.
Daniel
10 лет назад
Очень круто, давно искал такого полного обьяснения. Автору огромное спасибо.
10 лет назад
Очень простое и точное изложение материала. Мне бы очень пригодилась эта статья, наткнись я на нее днем ранее.
10 лет назад
настолько это элементарно, что немного неясно зачем выкладывать … на htmlbook полюбому что-то такое есть
10 лет назад
Всем новичкам можно еще посоветовать сразу научиться группировать стили, в данном случае background: позволит записать любой из примеров в 1 строку.
10 лет назад
А как сделать фон для ЖЖ? Загружаю картинку разных размеров, но он все равно на весь монитор ее не увеличивает, а тупо сует в угол или по центру (в зависимости от настроек). А мне бы хотелось, чтобы как обои на рабочем столе «растягивал» — смотря какое разрешение экрана у пользователя, который зайдет на мою страничку 🙁
Or1on
10 лет назад
Спасибо за классный урок, очень пригодился.
10 лет назад
«самое лучшее это фоновое изображение из векторной графики»
А разве браузеры уже читают векторную графику?
10 лет назад
Спасибо будем работать
10 лет назад
Полезная информация. Спасибо
10 лет назад
Твое мнение: Давно искал эту информацию. Буду менять фон блога
10 лет назад
Спасибоо)) сделайте новые уроки)
Shoemaker
9 лет назад
Спасибо за урок — ждем обновлений
9 лет назад
Спасибо! Все доступно написано 🙂
9 лет назад
Предпочитаю статичные фоны для сайта.