Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.145.76.40
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Архив - только для чтения
Нужна Помошь
Сообщение оставлено 24.02.2011 в 18:40:30 | Сообщение #1
Скажите код для Вставки фона на сайт
если можно то объясните куда и как
 
 
   
Сообщение оставлено 24.02.2011 в 20:20:58 | Сообщение #2
Большой фоновое изображение

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 по ширине.

 
 
   
Сообщение оставлено 24.02.2011 в 20:28:35 | Сообщение #3
добавлю еще, что большие изображения дольше грузятся, чем большое кол-во маленьких. Т.к. браузеры загружают одновременно несколько изображений маленьким весом, гораздо быстрее чем одно большое.
 
   
Сообщение оставлено 24.02.2011 в 20:31:31 | Сообщение #4
Liiion911, MASHENKO, Спасибо
 
 
   
Сообщение оставлено 26.02.2011 в 05:06:37 | Сообщение #5
закрыто
 
[qc]
Вроде как ушел с портала, а вроде как и остался)[/qc]
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика