Интернет
Как поставить фон на сайт?
Недавно создала сайтик через forumbb.ru. На нём МОЖНО использовать свой стиль оформления и фон. без него как то нетак. А я его ставить не умею. Обьясните, как?
Олег Илык
257
Возможно для вас управление фоном не состовляет сложно задачи, но начинающему трудно сразу вникнуть. Для этого и придуман этот урок, позоляющийпросмотреть примеры и самим их сделать.
C помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, является заданием настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства, какое вы сможете увидеть ниже.
background-color — задает цвет фона. Можно применять к отдельным элементам (например div) или ко всему сайту через через тэг <body>:
/* черный фон сайта */
body { background-color: #000; }
/* черный фон заголовка, белый цвет шрифта */
h1 { color: #fff; background-color: #000; }
background-image — используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
body { background-color: #000;
background-image: url («my-image.jpg»); }
Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.
background-repeat — используемое в предыдущем примере изображение будет повторяется по всему экрану. Данное свойство (repeat) призвано управлять этим процессом. Имеется несколько допустимых значений:
background-repeat: repeat-x — изображение повторяется только по горизонтали
background-repeat: repeat-y — изображение повторяется только по вертикали
background-repeat: repeat — изображение повторяется по горизонтали и вертикали
background-repeat: no-repeat — изображение не повторяется
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
background-attachment: scroll — прокручивается вместе со страницей
background-attachment: fixed — при прокрутке фон остается неподвижным
background-position — задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали) , которые начинаються с левого верхнего угла. Может задаваться:
в фиксированных единицах (пикселы, сантиметры)
в процентах
словесно: — top (сверху) , bottom (снизу) , center (по центру) , left (слева) и right (справа) .
Рассмотрим примеры:
background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
background-position: right bottom — рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Пример:
background: #fff url(«my-image.jpg») no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
C помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, является заданием настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства, какое вы сможете увидеть ниже.
background-color — задает цвет фона. Можно применять к отдельным элементам (например div) или ко всему сайту через через тэг <body>:
/* черный фон сайта */
body { background-color: #000; }
/* черный фон заголовка, белый цвет шрифта */
h1 { color: #fff; background-color: #000; }
background-image — используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
body { background-color: #000;
background-image: url («my-image.jpg»); }
Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.
background-repeat — используемое в предыдущем примере изображение будет повторяется по всему экрану. Данное свойство (repeat) призвано управлять этим процессом. Имеется несколько допустимых значений:
background-repeat: repeat-x — изображение повторяется только по горизонтали
background-repeat: repeat-y — изображение повторяется только по вертикали
background-repeat: repeat — изображение повторяется по горизонтали и вертикали
background-repeat: no-repeat — изображение не повторяется
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
background-attachment: scroll — прокручивается вместе со страницей
background-attachment: fixed — при прокрутке фон остается неподвижным
background-position — задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали) , которые начинаються с левого верхнего угла. Может задаваться:
в фиксированных единицах (пикселы, сантиметры)
в процентах
словесно: — top (сверху) , bottom (снизу) , center (по центру) , left (слева) и right (справа) .
Рассмотрим примеры:
background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
background-position: right bottom — рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Пример:
background: #fff url(«my-image.jpg») no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Похожие вопросы
- Как сохранить фон с сайта?
- Задний фон сайта Ucoz???
- Как поставить на хост готовый сайт.
- На какой хост поставить сайт?
- Хелп не могу нормально играть на сайте Newgrounds Грузится сайт долго и появляеться только тескт Белый фон и реклама
- Можно ли сайт с wordpress поставить на бесплатный хостинг и домен?))
- На системе Xp какойто глюк сайты долго грузит точнее изобрашенее, фон и т. д. на всех браузерах!
- Как раскрутить сайт. ну создам я сайт ну поставлю рекламу а как его раскртить???
- где можно хороший, чужой сайт скопировать и разместить в инете, поставить рекламу, банеры и получать деньги с чужих
- Хостинг для сайта Ребята подскажите пожалуйста простой и бесплатный хостинг на который можно поставить свой сайт