Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2012 » Декабрь » 22 » Background при помощи CSS
09:28
Background при помощи CSS
Здравствуйте уважаемые читатели!
Так как методы табличной разметки уже устарели (раньше можно было сделать все это с помощью таблицы), то предлагаю Вам сегодня поговорить  о том, как  сделать  наш фоновый рисунок сайта (Background) с помощью CSS.Давайте для начала разберемся что такое Baskground. Background для сайта или же   Фон для сайта , это одно и тоже самое.
Сейчас мы разберем четыре наиболее популярных метода создания фона для сайта или как говорят в народе background для сайта. Если Вы только начинаете свое знакомство с версткой сайтов, то эти четыре метода создания фона для сайта, будут именно для Вас.

Мы рассмотрим все четыре способа создания Background’а (фон для сайта) по детально, а именно:

  • - Фон с одного цвета

  • - Фон с текстуры

  • - Фон с помощью градиента

  • - Фон с большого изображения


Создаем фон для сайта с одного цвета



Код
body {
  background-color: #83C5E9; /*цвет фона*/
}


Браузеры по умолчанию сайтам дают фон с белого цвета. Но его можно очень легко сменить на другой. Заходим в файл style.css и редактируем наш  div body (тело сайта) прописываем свойство background-color с помощью которого, мы и изменин  фон для нашего сайта на другой цвет. Например свет синий, в HTML коде это будет #83C5E9
Создаем фон для сайта с текстуры

Фон для нашего сайта

Результат фона

Код
body {
  background-color: #537759; /*цвет фона*/
background-image: url(images/fon.png); /*подключаем текстуру*/
}


Фон с текстуры является популярным способом для создания фона для сайта. Текстуры бывают разные, сложными и простыми узорами, яркие и простые. Все что нам нужно сделать, так  это подключить нашу текстуру с помощью css свойства background-image, и она автоматически будет повторяться по оси x и оси y, так она заполнит всю нашу страницу. Но для перестраховки еще допишем и цвет фона (текстура у нас зеленая, поэтому логично и цвет фона сделать зеленым #537759).
Создаем фон для сайта с помощью градиента

Создаем наш градиент

Код
body {
  background-color: #83C5E9; /*цвет фона*/
background-image: url(images/fon-1.jpg); /*подключаем градиент*/
  background-repeat: repeat-x; /*градиент повторяться по оси x*/
}


Подключенное изображение с помощью css свойства background-image может повторяться  как по оси x так  и по оси y. Использование повтора изображения по оси х обычно используется для того, чтобы добавить градиент к какому-нибудь веб-элементу, например, для фона кнопок.
Поэтому мы создаем 1px по ширине линию с градиентом, это и будет наш фон для сайта. Сначала для страховки прописываем цвет фона background-color: #83C5E9; затем подключаем нашу градиентную линию, и с помощью css свойства background-repeat: repeat-x; заставляем нашу  линию размером в  1px повторяться по оси x.
У меня на скриншоте изображена большая градиентная линия, так делать не нужно, она должна быть 1px по ширине.
Создаем большое фоновое изображение

Большое фоновое изображение

Результат фона с большим фоновым изображением

Код
body {
  background-color: #000000; /*цвет фона*/
background-image: url(images/fon-2.jpg); /*подключаем изображения*/
  background-position: center top; /*позиция изображения, по центру экрана, прижатый к верху*/
  background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/
}


Суть этого способа, в том, что загружается большое фоновое изображение, которое размещается по центру экрана и прикрепленное к верху.
Но не забывайте оптимизировать ваше изображение для того, чтобы страница загружалась быстрее, самое лучшее это фоновое изображение из векторной графики.
Для удобства, я откоментировал все коментарии к свойствам в самих кодах.
На этом сегодня все!До новых встреч!
Категория: CSS | Просмотров: 2743 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика