Фон для сайта или Background для сайта

5 декабря 2010 года, Размещено в категории: HTML / CSS

Фон для сайта или Background для сайта

Фон для сайта или 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; /*не повторять изображение ни по одной оси*/
}

Суть этого способа, в том, что загружается большое фоновое изображение, которое размещается по центру экрана и прикрепленное к верху.
Но не забывайте оптимизировать ваше изображение для того, чтобы страница загружалась быстрее, самое лучшее это фоновое изображение из векторной графики. Все комментарии в коде.




Интересно будет почитать:



14 комментариев

  • Daniel

    8 лет назад Ответить

    Очень круто, давно искал такого полного обьяснения. Автору огромное спасибо.

  • Доктор

    8 лет назад Ответить

    Очень простое и точное изложение материала. Мне бы очень пригодилась эта статья, наткнись я на нее днем ранее.

  • sarkino

    8 лет назад Ответить

    настолько это элементарно, что немного неясно зачем выкладывать … на htmlbook полюбому что-то такое есть

  • Алексей Валеев

    8 лет назад Ответить

    Всем новичкам можно еще посоветовать сразу научиться группировать стили, в данном случае background: позволит записать любой из примеров в 1 строку.

  • Alexandr

    8 лет назад Ответить

    А как сделать фон для ЖЖ? Загружаю картинку разных размеров, но он все равно на весь монитор ее не увеличивает, а тупо сует в угол или по центру (в зависимости от настроек). А мне бы хотелось, чтобы как обои на рабочем столе «растягивал» — смотря какое разрешение экрана у пользователя, который зайдет на мою страничку 🙁

  • Or1on

    7 лет назад Ответить

    Спасибо за классный урок, очень пригодился.

  • шахтер

    7 лет назад Ответить

    «самое лучшее это фоновое изображение из векторной графики»
    А разве браузеры уже читают векторную графику?

  • Александр

    7 лет назад Ответить

    Твое мнение: Давно искал эту информацию. Буду менять фон блога

  • Shoemaker

    7 лет назад Ответить

    Спасибо за урок — ждем обновлений

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: