Установка флеш фона на сайт
Можно найти прикольную флеш и применить её в качестве фона на своём сайте. Дело хорошее, почему бы не удивить народ подобным эффектом, постараюсь сделать подробное описание как это можно сделать. Для установки флеш фона нам понадобится подключить файл .swf через тег <embed>.
<embed src="fail.swf" type='application/x-shockwave-flash' quality='high' wmode='transparent'>
Так как наш тег может быть не единственным на странице, нужно добавить к нему идентификатор (id), который придаст элементу индивидуальность. Придумаем ему семантическое (понятное) имя, например flash-bg (flash-background), по нашему - флеш фон.
<embed src="fail.swf" type='application/x-shockwave-flash' quality='high' wmode='transparent' id='flash-bg'>
Теперь можно переходить к основному мероприятию, надо нашему фону придать такие свойства, которые бы позволяли ему присутствовать на странице, но при этом не мешать всем остальным элементам радовать глаз гостей. Скорее всего Вы попробовали сделать фон сами, а он то не подключается как картинка, то подключается, но загораживает собой всё остальное. Да, тут нужно действовать последовательно, и можно обойтись использованием обычных свойств css, без применения непонятных скриптов. Во первых, нужно зафиксировать фон на странице, использовав свойство position со значением fixed и добавить свойства положения: top, right, bottom и left, указав им значение 0 (ноль). Получится что у зафиксированного элемента границы располагаются по краю всех четырёх сторон.
#flash-bg {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
Во избежании случайностей, желательно так же обнулить отступы, внешние (margin) и внутренние (padding), а заодно и бордюру (border) тоже сделаем ноль.
#flash-bg {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
border:0;
}
Ну и наконец, основное действие, которое должно создать эффект наслоения, помещение элемента фона под основной контент страницы, чтобы все элементы находились над флеш фоном. Для этого добавляем в код стилей свойство слоя (z-index) и устанавливаем ему уровень, со значением ниже нулевого. Дело в том, что значение свойства z-index по умолчанию равно 1, а значит Ваш фон разместится под всеми элементами.
#flash-bg {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:0;
padding:0;
border:0;
z-index:-1;
}
На этом действия, применяемые к элементу фона заканчиваются, но возникает потребность в установке основному тегу содержимого страницы <body> прозрачности фона. Сделать это можно двумя способами, найти в таблице стилей CSS перечень применяемых свойств к тегу body, и произвести изменение с указанием свойству background (фон) значения transparent (прозрачный): background:transparent;. Или добавить свойство напрямую в тег, находящийся в вёрстке страницы.
<body style="background:transparent;">
Готовый код и демо результат
Ниже представлен полностью готовый код, который Вы можете проверить в работе. Нажмите на значёк выполнения кода и поводите мышкой по экрану. Можете вставить ссылку на свой файл флешки и посмотреть результат.