Hey sobat blogger semua sekarang ada tambahan baru ini, saya akan bagikan kepada anda sebuah karya dengan menggunakan CSS yang tidak bisa dilakukan pada sofware pengolah web, gunakan aja cara-cara atau percobaan- percobaan untuk membuat background flash pada website pasti tentunya akan memperindah cantik tampilan website kamu tutorial ini saya pelajari dari sebuah buku yang saya baca yaitu buku berjudul Panduan Lengkap Menguasai CSS karya orang bali lho yaitu Komang Wiswakarma untuk sejelasnya kalian bisa jadikan buku itu deh sebagai patokan dan blog ini sebagai referensi atau hasil kerja yang saya lakukan di dalam membaca buku itu he he saya akan contohkan scriftnya tetapi sebelum itu buatlah dulu backgroundnya menggunakan Adobe flash maupun Macromedia flash untuk pembuatannya

-------------------------------------------------------------------------------------------------------

   /*    Unobtrusive Flash Objects (UFO) v3.22 <http://www.bobbyvandersluis.com/ufo/>
    Copyright 2005-2007 Bobby van der Sluis
    This software is licensed under the CC-GNU LGPL <http://creativecommons.org/licenses/LGPL/2.1/>
*/

var UFO = {
    req: ["movie", "width", "height", "majorversion", "build"],
    opt: ["play", "loop", "menu", "quality", "scale", "salign", "wmode", "bgcolor", "base", "flashvars", "devicefont", "allowscriptaccess", "seamlesstabbing", "allowfullscreen", "allownetworking"],
    optAtt: ["id", "name", "align"],
    optExc: ["swliveconnect"],
    ximovie: "ufo.swf",
    xiwidth: "215",
    xiheight: "138",
    ua: navigator.userAgent.toLowerCase(),
    pluginType: "",
    fv: [0,0],
    foList: [],
       
    create: function(FO, id) {
        if (!UFO.uaHas("w3cdom") || UFO.uaHas("ieMac")) return;
        UFO.getFlashVersion();
        UFO.foList[id] = UFO.updateFO(FO);
        UFO.createCSS("#" + id, "visibility:hidden;");
        UFO.domLoad(id);
    },

    updateFO: function(FO) {
        if (typeof FO.xi != "undefined" && FO.xi == "true") {
            if (typeof FO.ximovie == "undefined") FO.ximovie = UFO.ximovie;
            if (typeof FO.xiwidth == "undefined") FO.xiwidth = UFO.xiwidth;
            if (typeof FO.xiheight == "undefined") FO.xiheight = UFO.xiheight;
        }
        FO.mainCalled = false;
        return FO;
    },

    domLoad: function(id) {
        var _t = setInterval(function() {
            if ((document.getElementsByTagName("body")[0] != null || document.body != null) && document.getElementById(id) != null) {
                UFO.main(id);
                clearInterval(_t);
            }
        }, 250);
        if (typeof document.addEventListener != "undefined") {
            document.addEventListener("DOMContentLoaded", function() { UFO.main(id); clearInterval(_t); } , null); // Gecko, Opera 9+
        }
    },

    main: function(id) {
        var _fo = UFO.foList[id];
        if (_fo.mainCalled) return;
        UFO.foList[id].mainCalled = true;
        document.getElementById(id).style.visibility = "hidden";
        if (UFO.hasRequired(id)) {
            if (UFO.hasFlashVersion(parseInt(_fo.majorversion, 10), parseInt(_fo.build, 10))) {
                if (typeof _fo.setcontainercss != "undefined" && _fo.setcontainercss == "true") UFO.setContainerCSS(id);
                UFO.writeSWF(id);
            }
            else if (_fo.xi == "true" && UFO.hasFlashVersion(6, 65)) {
                UFO.createDialog(id);
            }
        }
        document.getElementById(id).style.visibility = "visible";
    },
   
    createCSS: function(selector, declaration) {
        var _h = document.getElementsByTagName("head")[0];
        var _s = UFO.createElement("style");
        if (!UFO.uaHas("ieWin")) _s.appendChild(document.createTextNode(selector + " {" + declaration + "}")); // bugs in IE/Win
        _s.setAttribute("type", "text/css");
        _s.setAttribute("media", "screen");
        _h.appendChild(_s);
        if (UFO.uaHas("ieWin") && document.styleSheets && document.styleSheets.length > 0) {
            var _ls = document.styleSheets[document.styleSheets.length - 1];
            if (typeof _ls.addRule == "object") _ls.addRule(selector, declaration);
        }
    },
   
    setContainerCSS: function(id) {
        var _fo = UFO.foList[id];
        var _w = /%/.test(_fo.width) ? "" : "px";
        var _h = /%/.test(_fo.height) ? "" : "px";
        UFO.createCSS("#" + id, "width:" + _fo.width + _w +"; height:" + _fo.height + _h +";");
        if (_fo.width == "100%") {
            UFO.createCSS("body", "margin-left:0; margin-right:0; padding-left:0; padding-right:0;");
        }
        if (_fo.height == "100%") {
            UFO.createCSS("html", "height:100%; overflow:hidden;");
            UFO.createCSS("body", "margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; height:100%;");
        }
    },

    createElement: function(el) {
        return (UFO.uaHas("xml") && typeof document.createElementNS != "undefined") ?  document.createElementNS("http://www.w3.org/1999/xhtml", el) : document.createElement(el);
    },

    createObjParam: function(el, aName, aValue) {
        var _p = UFO.createElement("param");
        _p.setAttribute("name", aName);   
        _p.setAttribute("value", aValue);
        el.appendChild(_p);
    },

    uaHas: function(ft) {
        var _u = UFO.ua;
        switch(ft) {
            case "w3cdom":
                return (typeof document.getElementById != "undefined" && typeof document.getElementsByTagName != "undefined" && (typeof document.createElement != "undefined" || typeof document.createElementNS != "undefined"));
            case "xml":
                var _m = document.getElementsByTagName("meta");
                var _l = _m.length;
                for (var i = 0; i < _l; i++) {
                    if (/content-type/i.test(_m[i].getAttribute("http-equiv")) && /xml/i.test(_m[i].getAttribute("content"))) return true;
                }
                return false;
            case "ieMac":
                return /msie/.test(_u) && !/opera/.test(_u) && /mac/.test(_u);
            case "ieWin":
                return /msie/.test(_u) && !/opera/.test(_u) && /win/.test(_u);
            case "gecko":
                return /gecko/.test(_u) && !/applewebkit/.test(_u);
            case "opera":
                return /opera/.test(_u);
            case "safari":
                return /applewebkit/.test(_u);
            default:
                return false;
        }
    },
   
    getFlashVersion: function() {
        if (UFO.fv[0] != 0) return; 
        if (navigator.plugins && typeof navigator.plugins["Shockwave Flash"] == "object") {
            UFO.pluginType = "npapi";
            var _d = navigator.plugins["Shockwave Flash"].description;
            if (typeof _d != "undefined") {
                _d = _d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
                var _m = parseInt(_d.replace(/^(.*)\..*$/, "$1"), 10);
                var _r = /r/.test(_d) ? parseInt(_d.replace(/^.*r(.*)$/, "$1"), 10) : 0;
                UFO.fv = [_m, _r];
            }
        }
        else if (window.ActiveXObject) {
            UFO.pluginType = "ax";
            try { // avoid fp 6 crashes
                var _a = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
            }
            catch(e) {
                try {
                    var _a = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
                    UFO.fv = [6, 0];
                    _a.AllowScriptAccess = "always"; // throws if fp < 6.47
                }
                catch(e) {
                    if (UFO.fv[0] == 6) return;
                }
                try {
                    var _a = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
                }
                catch(e) {}
            }
            if (typeof _a == "object") {
                var _d = _a.GetVariable("$version"); // bugs in fp 6.21/6.23
                if (typeof _d != "undefined") {
                    _d = _d.replace(/^\S+\s+(.*)$/, "$1").split(",");
                    UFO.fv = [parseInt(_d[0], 10), parseInt(_d[2], 10)];
                }
            }
        }
    },

    hasRequired: function(id) {
        var _l = UFO.req.length;
        for (var i = 0; i < _l; i++) {
            if (typeof UFO.foList[id][UFO.req[i]] == "undefined") return false;
        }
        return true;
    },
   
    hasFlashVersion: function(major, release) {
        return (UFO.fv[0] > major || (UFO.fv[0] == major && UFO.fv[1] >= release)) ? true : false;
    },

    writeSWF: function(id) {
        var _fo = UFO.foList[id];
        var _e = document.getElementById(id);
        if (UFO.pluginType == "npapi") {
            if (UFO.uaHas("gecko") || UFO.uaHas("xml")) {
                while(_e.hasChildNodes()) {
                    _e.removeChild(_e.firstChild);
                }
                var _obj = UFO.createElement("object");
                _obj.setAttribute("type", "application/x-shockwave-flash");
                _obj.setAttribute("data", _fo.movie);
                _obj.setAttribute("width", _fo.width);
                _obj.setAttribute("height", _fo.height);
                var _l = UFO.optAtt.length;
                for (var i = 0; i < _l; i++) {
                    if (typeof _fo[UFO.optAtt[i]] != "undefined") _obj.setAttribute(UFO.optAtt[i], _fo[UFO.optAtt[i]]);
                }
                var _o = UFO.opt.concat(UFO.optExc);
                var _l = _o.length;
                for (var i = 0; i < _l; i++) {
                    if (typeof _fo[_o[i]] != "undefined") UFO.createObjParam(_obj, _o[i], _fo[_o[i]]);
                }
                _e.appendChild(_obj);
            }
            else {
                var _emb = "";
                var _o = UFO.opt.concat(UFO.optAtt).concat(UFO.optExc);
                var _l = _o.length;
                for (var i = 0; i < _l; i++) {
                    if (typeof _fo[_o[i]] != "undefined") _emb += ' ' + _o[i] + '="' + _fo[_o[i]] + '"';
                }
                _e.innerHTML = '<embed type="application/x-shockwave-flash" src="' + _fo.movie + '" width="' + _fo.width + '" height="' + _fo.height + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' + _emb + '></embed>';
            }
        }
        else if (UFO.pluginType == "ax") {
            var _objAtt = "";
            var _l = UFO.optAtt.length;
            for (var i = 0; i < _l; i++) {
                if (typeof _fo[UFO.optAtt[i]] != "undefined") _objAtt += ' ' + UFO.optAtt[i] + '="' + _fo[UFO.optAtt[i]] + '"';
            }
            var _objPar = "";
            var _l = UFO.opt.length;
            for (var i = 0; i < _l; i++) {
                if (typeof _fo[UFO.opt[i]] != "undefined") _objPar += '<param name="' + UFO.opt[i] + '" value="' + _fo[UFO.opt[i]] + '" />';
            }
            var _p = window.location.protocol == "https:" ? "https:" : "http:";
            _e.innerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + _objAtt + ' width="' + _fo.width + '" height="' + _fo.height + '" codebase="' + _p + '//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=' + _fo.majorversion + ',0,' + _fo.build + ',0"><param name="movie" value="' + _fo.movie + '" />' + _objPar + '</object>';
        }
    },
       
    createDialog: function(id) {
        var _fo = UFO.foList[id];
        UFO.createCSS("html", "height:100%; overflow:hidden;");
        UFO.createCSS("body", "height:100%; overflow:hidden;");
        UFO.createCSS("#xi-con", "position:absolute; left:0; top:0; z-index:1000; width:100%; height:100%; background-color:#fff; filter:alpha(opacity:75); opacity:0.75;");
        UFO.createCSS("#xi-dia", "position:absolute; left:50%; top:50%; margin-left: -" + Math.round(parseInt(_fo.xiwidth, 10) / 2) + "px; margin-top: -" + Math.round(parseInt(_fo.xiheight, 10) / 2) + "px; width:" + _fo.xiwidth + "px; height:" + _fo.xiheight + "px;");
        var _b = document.getElementsByTagName("body")[0];
        var _c = UFO.createElement("div");
        _c.setAttribute("id", "xi-con");
        var _d = UFO.createElement("div");
        _d.setAttribute("id", "xi-dia");
        _c.appendChild(_d);
        _b.appendChild(_c);
        var _mmu = window.location;
        if (UFO.uaHas("xml") && UFO.uaHas("safari")) {
            var _mmd = document.getElementsByTagName("title")[0].firstChild.nodeValue = document.getElementsByTagName("title")[0].firstChild.nodeValue.slice(0, 47) + " - Flash Player Installation";
        }
        else {
            var _mmd = document.title = document.title.slice(0, 47) + " - Flash Player Installation";
        }
        var _mmp = UFO.pluginType == "ax" ? "ActiveX" : "PlugIn";
        var _uc = typeof _fo.xiurlcancel != "undefined" ? "&xiUrlCancel=" + _fo.xiurlcancel : "";
        var _uf = typeof _fo.xiurlfailed != "undefined" ? "&xiUrlFailed=" + _fo.xiurlfailed : "";
        UFO.foList["xi-dia"] = { movie:_fo.ximovie, width:_fo.xiwidth, height:_fo.xiheight, majorversion:"6", build:"65", flashvars:"MMredirectURL=" + _mmu + "&MMplayerType=" + _mmp + "&MMdoctitle=" + _mmd + _uc + _uf };
        UFO.writeSWF("xi-dia");
    },

    expressInstallCallback: function() {
        var _b = document.getElementsByTagName("body")[0];
        var _c = document.getElementById("xi-con");
        _b.removeChild(_c);
        UFO.createCSS("body", "height:auto; overflow:auto;");
        UFO.createCSS("html", "height:auto; overflow:auto;");
    },

    cleanupIELeaks: function() {
        var _o = document.getElementsByTagName("object");
        var _l = _o.length
        for (var i = 0; i < _l; i++) {
            _o[i].style.display = "none";
            for (var x in _o[i]) {
                if (typeof _o[i][x] == "function") {
                    _o[i][x] = null;
                }
            }
        }
    }

};

if (typeof window.attachEvent != "undefined" && UFO.uaHas("ieWin")) {
    window.attachEvent("onunload", UFO.cleanupIELeaks);
}
   

-------------------------------------------------------------------------------------------------------

okelah sudah mempunyai bayangan akan file itu simpan di dalam satu folder ya misalkan nama folder background_flash-->didalamnya terdapat dua folder lagi  yaitu flash dan js kemudian terdapat dua file html dan css untuk sekarang simpan dulu javascrift diatas dengan nama ufo.js setelah itu bualah lagi scrift CSSnya oke simak deh dibawah ini:

-------------------------------------------------------------------------------------------------------

     body{
        margin:0px;
        padding:0px;
        background-color:#666666;
        font-family:arial;
        font-size:80%;
        color:#333333;
        overflow:hidden;
    }

    #flash-background{
        width:1014px;
        height:960px;
        text-align:left;
        margin:0px auto;
        position:absolute;
        top:0px;
        left:50%;
        margin-left:-507px;
        z-index:0;
    }
  
    #website{
        width:800px;
        height:400px;
        text-align:left;
        margin:30px auto;
        position:relative;
        z-index:10000;
        background-repeat:no-repeat;
    }
  
    .text-content{
        padding:15px;
    }
   

-------------------------------------------------------------------------------------------------------

setelah mempunyai file css seperti diatas simpan dengan nama style oke, mari kita lanjut membuat dokumen html nya, simak html berikut ini:

-------------------------------------------------------------------------------------------------------

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flash Background</title>


<script type="text/javascript" src="js/ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"flash/background.swf", width:"1014", height:"960", majorversion:"8", build:"0", xi:"true", wmode:"transparent" };
UFO.create(FO, "flash-background");
</script>


<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="flash-background"></div>
<div id="website">
<div class="text-content">Disini kita akan meletakkan konten-konten dari web. File animasi akan menjadi background dari web kita. Selamat mencoba</div>
</div> 


</body>
</html>

-------------------------------------------------------------------------------------------------------

Gampang bukan sekarang bukalah menggunakan browser sehingga kita bisa mengetahui hasilnya kalau terjadi kesalahan simak aturan penggunaan Css pada postingan terdahulu untuk javascrift ingat cara memasukan linjavascrift ke html adalah seperti ini: <script type="text/javascript" src="js/ufo.js"></script> huruf yang tebal itu menyatakan folder dan file java yang disimpan oke saya akan lanjutkan semua tentang css kepada kalian tunggu postingan berikutnya terima kasih pengen contoh download disini