Приветствую Вас Прохожий | RSS Воскресенье, 12.05.2024, 13:05
  • Страница 1 из 1
  • 1
Форум » Поддержка по uCoz » Веб-мастеру информация, скрипты » Как сменить или изменить фон сайта на ucoz ? (полная инструкция)
Как сменить или изменить фон сайта на ucoz ?
mdbaner Дата: Четверг, 04.06.2009, 20:15 | Сообщение # 1

Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
Звание: Министр
Группа: V.I.P персона
Сообщений: 4723
Награды: 309
Репутация: 3756
Замечания: 0%
На форуме одним из популярных вопросов, который мне задают, это вопрос о том, как поменять фон на сайте. Это первое, что часто хотят сделать при создании сайта новички. Именно для Вас, новичков, я и предлагаю это статью. Постараюсь рассмотреть все возможные случаи и рассказать о них на понятном языке.
Итак, давайте по порядку. Первое, о чем Вам нужно задуматься, если Вы решили поменять фон, это то, как он должен себя вести при разных расширениях монитора. Большинство новичков об этом совершенно забывают. А ведь мониторы у всех разные, поэтому это обязательно надо иметь в виду. Давайте разберемся, какие варианты возможны:
1. Вы задаете фон просто цветом. Этот вариант легко реализовать. Он не будет долго грузиться и будет одинаково выглядеть абсолютно на всех мониторах и браузерах. Но многим хочется красоты. Поэтому идем дальше
2. Можно задать фон из картинки, которая может повторяться по вертикали или по горизонтали, или по обоим направлениям. Как пример, вот картинка фона шапки на этом сайте

Хотите поставить картинку, например, какой-то пейзаж. То тут возможны 3 варианта
3.1. Можно сделать картинку под самый маленький монитор (обычно это 1024px) и разместить этот фон по центру , плюс задать цвет фона, который будет заполнять свободное место там, где не будет картинки при более больших размерах монитора.
3.2. Можно сделать картинку автоматически масштабируемую под размеры монитора, но это работает не во всех браузерах, например, не работает в Internet Explorer. Поэтому такой вариант подойдет очень немногим.
3.3. Последний вариант - это скорее дополнительный момент к 2 предыдущим: фон может заполнять все пространство страницы, а может совпадать с размером монитора и при прокручивании страницы оставаться неподвижным.
Вот, в общем-то, и все варианты. Если определились, давайте начнем.
Фон страницы обычно задается в теге
Code
<body>

с помощью свойства
Code
background.

Возможны два варианта:
1. свойство может быть задано прямо в шаблоне страницы
2. свойство может быть прописано в таблице CSS
Причем, если свойство прописано и там, и там, то сработает то, что написано в шаблоне.
Если свойство прописано в шаблоне, то выглядит оно примерно так:
Code
<body style="background: #FcFcFc;">

свойств внутри может быть гораздо больше, они перечисляются через запятую, но нас интересует только свойство background
если оно прописано в таблице css, то в шаблоне будет просто
Code
<body>

а в таблице css примерно так:
Code
body {background: #FcFcFc;}

В чем тут принципиальное отличие? В том, что если у Вас первый вариант , изменения придется производить во всех используемых шаблонах: шаблоне каталога статей, шаблоне модуля новостей и так далее. Тут Вам будет полезна функция Быстрая замена участков кода. Вам необходимо будет сначала настроить код в шаблоне страницы сайта. А потом зайти в Меню - Дизайн -Быстрая замена участков шаблона - Что заменить - вставляете код
Code
<body .......>

, какой он остался в изначальных шаблонах , На что заменить: - новый код . Тогда замена будет проведена во всех шаблонах. Другой вариант. Сразу заменить изначальный код на просто
Code
<body>

, и тогда уже все изменения надо будет делать только в таблице css (вариант 2)
Итак, с основными моментами разобрались. А теперь разберем и все свойства. Я буду приводить примеры кода, которые соответственно Вы сможете внедрить следующим образом:
- в шаблоне страницы
Code
<body style="пример кода">
- в таблице CSS
body {пример кода}

1. Задаем фон прост цветом
Code
background: #FcFcFc;

цвета очень хорошо можно подобрать здесь : Подбор цвета
2. Задаем фон картинкой
Code
background: url('адрес картинки');

задаем фон картинкой, которая не будет повторяться
Code
background: url('адрес картинки') no-repeat;

3. Задаем фон картинкой, которая будет повторяться по горизонтали
Code
background: url('адрес картинки') repeat-x;

4. Задаем фон картинкой, которая будет повторяться по вертикали
Code
background: url('адрес картинки') repeat-y;

5. Задаем фон картинкой, которая будет повторяться и по горизонтали, и по вертикали
Code
background: url('адрес картинки') repeat;

6. Задаем фон картинкой, которая будет по центру горизонтали и по верху по вертикали
Code
background: url('адрес картинки') 50% 0%;

7. Задаем фон картинкой, которая будет по центру горизонтали и по верху по вертикали , плюс цвет, там, где картинки не будет
Code
background:#fcfcfc url('адрес картинки') 50% 0%;

8. Задаем фон картинкой, которая не будет прокручиваться при прокручивании страницы
Code
background:#fcfcfc url('адрес картинки') 50% 0%;background-attachment: fixed;

9. Задаем фон картинкой, которая будет масштабироваться
Code
background: url('адрес картинки');background-size:100%;


Подпись пользователя mdbaner1 Права групп и возможности пользователей
2 Общие правила форума которые нужно знать всем
3 Пожаловаться на Администратора или Модератора тут
4 Задать вопрос в Support сайта Ucozon
5 Ответы на постоянные вопросы в модуле FAQ
6 Цены и виды моих услуг по дизайну и настройке


Больше всего меня вырубает когда пользователь просит меня что либо найти, указывая на то что не умеет пользоваться поиском
 
Форум » Поддержка по uCoz » Веб-мастеру информация, скрипты » Как сменить или изменить фон сайта на ucoz ? (полная инструкция)
  • Страница 1 из 1
  • 1
Поиск:

Статистика Форума
Новые пользователи Последние темы Лучшие пользователи

1 Vladimrij (Vladimir)

UA08:13 - 06.04.2024

2 Highvard (Никита)

BY11:02 - 10.03.2024

3 Khaliff93 (Artem)

US14:28 - 26.02.2024

4 Vvvpol (Stepan)

UA16:43 - 22.02.2024

5 exvardi (Vladimir)

MD14:47 - 18.02.2024

6 Ja_Rule (Евгений Пил)

BY10:19 - 13.02.2024

7 funvaz (Gosha)

KZ20:46 - 22.12.2023

8 dj2nik (dj2nik)

UA11:22 - 11.12.2023

9 gluk123 (Max)

UA09:42 - 21.10.2023

10 AlexGrim (Alex)

RU09:22 - 17.10.2023

11 Renegat95 (Ромич)

RU09:08 - 08.10.2023

12 leon1965 (Bob Dutu)

CA15:43 - 13.08.2023

13 2ef005 (Андрей)

UA12:13 - 04.07.2023

14 Coresh100 (Сергей Моро)

BY23:22 - 28.06.2023

15 11smith11 (Smith Bonda)

UA18:49 - 18.06.2023

16 perimetr (Николай)

BY16:53 - 13.05.2023

17 elm2 (Андрей)

BY09:46 - 03.05.2023

18 qetruhdf2 (alx alex)

RU23:29 - 02.04.2023

19 3737 (Dudgos)

CA18:24 - 19.03.2023

20 ziercool (ziercool)

PL17:54 - 15.03.2023

21 dedtalash (Вадим)

BY14:32 - 27.02.2023

22 Robin113 (Andrei)

DE18:05 - 17.02.2023

23 vova_vova (Vov)

UA23:03 - 09.11.2022

24 Bull888 (Светлана)

UA09:08 - 25.10.2022

25 tigo1 (Tigo)

AM21:52 - 21.10.2022

26 fekin4321 (VladFekin)

UA00:32 - 14.10.2022

27 Tasiil (Дмитрий)

BY06:12 - 06.10.2022

28 ambako22 (ambako)

GE20:10 - 13.09.2022

29 sadnon (Vitaliy)

UA09:37 - 10.09.2022

30 kokish81 (Владимир)

PL12:41 - 08.09.2022

1 Работа на заводе

German Vikrumas [29]

2 Комплексный прогон сайтов ру и...

myod kysovue [54]

3 Армия

MarinaKli MarinaKli [0]

4 Может у кого есть!

MarinaKli Vistel [6]

5 Нужны копирайты

MarinaKli mvr312 [1]

6 Остались честные СМИ?

KateKuz KateKuz [0]

7 Раздача подарков и стикеров в ...

KateKuz MDNdemon [1]

8 Дисковое пространство

KateKuz frolov1028 [3]

9 Ручной прогон по трастовым сай...

kalip27 kalip27 [19]

10 бот для умножения денег на фор...

forexmone forexmone [0]

11 Программировние

forexmone Playmanovich [7]

12 Пропала реклама

forexmone frolov1028 [3]

13 У сайта вырос ТИЦ

Openair Vistel [8]

14 Нужны дизайнеры

Openair demons063 [2]

15 ⭐️Ручной статейный прогон⭐️

eternalli eternalli [0]

16 Как раскрутить кино сайт

eternalli JAko [6]

17 [100p] Нарисовать логотип.

XAMEJIUOH XAMEJIUOH [0]

18 Требуется человек для создания...

Vikrumas Vikrumas [0]

19 Качественный рерайт/копирайт о...

GaV GaV [161]

20 Календарь

frolov1028 Vikrumas [1]

21 Профильно-статейны прогон по с...

GaV GaV [0]

22 Файловик на сайт (копипаст) оп...

MDNdemon MDNdemon [58]

23 Изображение в CSS

xbalson GaV [2]

24 Файловый Менеджер - Высокая оп...

Freemekc Freemekc [2]

25 В каких интернет магазинах вы ...

Beowb428 GaV [9]

26 Скрипт и инструкция добавления...

DianaLebe мир [3]

27 Трафик на сайт по низким ценам...

brig2 vir4us [4]

28 Продам билеты в московский кин...

brig2 MDNdemon [1]

29 Создать лого на сайт

korel korel [0]

30 25 жирных ссылок. Яндекс Катал...

NikeNikol NikeNikol [0]

1 frolov1028

UAРепа: 4431 Файлов: 29 Форум: 1317

2 Кирилл

RUРепа: 4292 Файлов: 15 Форум: 3818

3 мир

MDРепа: 4084 Файлов: 878 Форум: 1019

4 WinDiZ

Репа: 3943 Файлов: 2 Форум: 1252

5 mdbaner

MDРепа: 3756 Файлов: 713 Форум: 4723

6 GaV

RUРепа: 3621 Файлов: 0 Форум: 1262

7 Kapusha

RUРепа: 3371 Файлов: 35 Форум: 1177

8 PrADeN

FRРепа: 3318 Файлов: 84 Форум: 2076

9 martinis

RUРепа: 3247 Файлов: 46 Форум: 444

10 German

RUРепа: 2768 Файлов: 18 Форум: 258

11 STAFF

USРепа: 2720 Файлов: 72 Форум: 757

12 ALINA

RUРепа: 2677 Файлов: 277 Форум: 9

13 StraJ

UAРепа: 2243 Файлов: 12 Форум: 545

14 smart4on

BYРепа: 2232 Файлов: 4 Форум: 661

15 makcim19997

RUРепа: 2204 Файлов: 171 Форум: 1067

16 GaMeRgame

RUРепа: 2082 Файлов: 4 Форум: 722

17 TRANE73

RUРепа: 2015 Файлов: 34 Форум: 165

18 ivanfom

RUРепа: 1887 Файлов: 15 Форум: 319

19 Zhenikuls

RUРепа: 1884 Файлов: 6 Форум: 65

20 tmb

RUРепа: 1570 Файлов: 0 Форум: 214

21 xbalson

MDРепа: 1378 Файлов: 4 Форум: 561

22 Smile

RUРепа: 1311 Файлов: 23 Форум: 444

23 hjp^

RUРепа: 1248 Файлов: 14 Форум: 192

24 domovik21

UAРепа: 1237 Файлов: 16 Форум: 177

25 Prix

RUРепа: 1122 Файлов: 6 Форум: 91

26 LEO--MESSI

RUРепа: 1115 Файлов: 6 Форум: 468

27 Playmanovich

UAРепа: 1087 Файлов: 3 Форум: 981

28 WmMariupol

UAРепа: 1081 Файлов: 0 Форум: 55

29 K@rDeL

RUРепа: 1076 Файлов: 0 Форум: 382

30 LUIS75

RUРепа: 1033 Файлов: 1 Форум: 198

Избранные ссылки
5 последних закладок Описание и использование закладок
Закладки создаются при помощи "куков" которые хранятся в вашем браузере 30 дней, если жи вы почистили куки в своем браузере то закладки исчезнут.
отображаются только 5 последних закладок, предыдущие удаляются по мере обновления списка.
Вы можете любую не нужную закладку удалить нажатием X на против ссылки.
Бывает что запись кука пролетает, но это уже ошибки браузера и его записей.
Если при обновление страницы выводится ошибка 400 то что бы исправить необходимо удалить все куки браузера
Если вы заметили ошибки то сообщайте администратору.


Copyright UcozOn.ru™ © 2008-2024


Кнопка 88х31 сайта ucozon.ru