CSS Box Shadow - Membuat Efek Bayangan pada Area

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="dte_post-body" itemprop="articleBody"><br /><div class="separator center"><br /><img alt="CSS Box-Shadow" height="142" src="http://3.bp.blogspot.com/-zqUTXaitRZY/TjkVxO9Dc-I/AAAAAAAAAhw/hNnkgs1kzEg/s320/ombre-css3-box-shadow1.png" width="247" /></div><br />Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:<br /><br /><h3><br />CSS Bayangan Outset</h3><br /><pre data-codetype="CSS" id="code-block:1"><code class="css"><span class="tag">div</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Safari & Chrome */</span><br /> <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Firefox */</span><br /> <span class="rule"><span class="attribute">box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* W3C */</span><br /><span class="rule">}</span></span></code></pre><br /><h3><br />CSS Bayangan Inset</h3><br /><pre data-codetype="CSS" id="code-block:2"><code class="css"><span class="tag">div</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Safari & Chrome */</span><br /> <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Firefox */</span><br /> <span class="rule"><span class="attribute">box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* W3C */</span><br /><span class="rule">}</span></span></code></pre><br /><code>10px</code> yang pertama adalah ukuran <i>offset</i> sumbu X, <code>10px</code> yang ke dua adalah <i>offset</i> sumbu Y, <code>7px</code> adalah tingkat blur, <code>#222</code> adalah warna bayangan. Kamu juga bisa menuliskan nilai <i>offset</i> negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara <i>top down</i> ataupun <i>inline</i> seperti ini:<br /><br /><br /><br /><table border="1" class="full compare"><thead><br /><tr><th style="width: 50%;">Top-Down</th><th style="width: 50%;">Inline</th></tr><br /></thead><tbody><br /><tr><td><code><style><br /><br />#kotak-1 {<br /><br />  -webkit-box-shadow:10px 10px 7px #222;<br /><br />  -moz-box-shadow:10px 10px 7px #222;<br /><br />  box-shadow:10px 10px 7px #222;<br /><br />}<br /><br /></style><br /><br /><div id='kotak-1'><b>OBJEK</b></div></code></td><td><code><div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'><b>OBJEK</b></div></code></td></tr><br /></tbody></table><br /><br /><br />Dan ini adalah contoh-contoh penerapan yang lebih <br />detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas <br />bagian mana yang harus menjadi perhatian:<br /><br /><br /><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;<br /><br />-moz-box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;<br /><br />box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">0</span> 10px 7px #222;<br /><br />-moz-box-shadow: <span style="color: red;">0</span> 10px 7px #222;<br /><br />box-shadow: <span style="color: red;">0</span> 10px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; margin: 0 auto 30px; padding: 5px; padding: 5px; width: 500px; width: 500px;"><br /><code>-webkit-box-shadow: 10px <span style="color: red;">0</span> 7px #222;<br /><br />-moz-box-shadow: 10px <span style="color: red;">0</span> 7px #222;<br /><br />box-shadow: 10px <span style="color: red;">0</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">0 0</span> 7px #222;</code><code><br />-moz-box-shadow: <span style="color: red;">0 0</span> 7px #222;</code><br /><code></code><code><br />box-shadow: <span style="color: red;">0 0</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 0 0 <span style="color: red;">20px</span> #222;<br /><br />-moz-box-shadow: 0 0 <span style="color: red;">20px</span> #222;<br /><br />box-shadow: 0 0 <span style="color: red;">20px</span> #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;<br /><br />-moz-box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;<br /><br />box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 10px 5px <span style="color: red;">0</span> #222;<br /><br />-moz-box-shadow: 10px 5px <span style="color: red;">0</span> #222;<br /><br />box-shadow: 10px 5px <span style="color: red;">0</span> #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;<br /><br />box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;</code></div><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dcbc961-b7df-4549-969e-3ed5aec6b090" style="border: none; float: right;" /></div><br /></div><br />

CSS Box Shadow - Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset div { -webkit-box-shadow : 10 px 10 px 7 px...

Read more »

How To Add Scrolling Sticky Bar To Blogger?

<span style="font-size: 15px;">On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !<br /><br />To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.<br /><b></b></span><br /><br /><a name='more'></a><span style="font-size: 15px;"><b><br /><span style="font-size: large;">Demo.</span></b><br />You can see the live demo on this very page itself ! Please scrool to  down this page, you can see it.</span><br /><br /><br /><br /><a href="http://www.stylifyyourblog.com/2012/06/scrolling-sticky-bar-for-blogger.html" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="sticky header bar" class="thumb" height="auto" src="http://1.bp.blogspot.com/-UlXMHg1eEmU/T980RhPkXCI/AAAAAAAAFtM/x88ThCQK9lE/s400/sticky+bar.PNG" width="100%" /></a><span style="font-size: 15px;"><span style="font-size: 15px;"></span><br /> </span><br /><br /><br /><br /><span style="font-size: 15px;"><b>How To Add Scrolling Sticky Bar To Blogger? Please follow the step by step below:<br /><br /><br /><span style="font-size: large;"><span style="font-size: small;">Steps 1 : Adding CSS code The Bar Styles</span></span></b></span><span style="font-size: small;"><b><br /></b></span><br /><br /><ol><br /><li><span style="font-size: 15px;">Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option.</span></li><br /><li><span style="font-size: 15px;">find for  ]]></b:skin></span></li><br /><li><span style="font-size: 15px;">add the following CSS code just before ]]></b:skin> tag  </span></li><br /></ol><br /><span style="font-size: 15px;"><br /><br /><br /><textarea style="height: 68px; width: 100%;">#SYB-Bar-Container {<br />background-color:#f6f6f6;<br />background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));<br />background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));<br />}<br /><br /> #SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {<br /> box-shadow: 0 5px 5px -5px #999;<br /> -webkit-box-shadow: 0 5px 5px -5px #999;<br /> -moz-box-shadow: 0 5px 5px -5px #999;<br /> }<br /><br /> #SYB-Bar-Container{<br />margin: 0px 116px;<br /> top:-100px;<br />-moz-border-radius:0px 0px 10px 10px;<br />-webkit-border-radius:0px 0px 10px 10px;<br />border-radius: 0px 0px 10px 10px;<br /> text-align:center;<br /> border-bottom: 1px solid #aaa;<br /> z-index:999;<br />padding:4px;<br /> height:33px;<br /> position:fixed;<br /> vertical-align: baseline;<br /> }<br /><br />#SYB-Bar-Container *{<br />padding:0;<br />}<br /><br />#SYB-Bar-Container a {<br />text-decoration:none;<br />}<br /><br />#SYB-Bar-Content{<br />width:1024px;<br />margin:0 auto;<br />}<br /><br />#SYB-Bar-Content li{<br />list-style:none;<br />float:left;<br />}<br /><br />#SYB-Bar-Left{<br />float:left;<br />width:45%;<br />}<br /><br />#SYB-Bar-Right{<br />float:right;<br />width55%;<br />}<br /><br />#SYB-Bar-Left li{<br />margin-right:1%;<br />margin-top:-7px;<br />}<br /><br />#SYB-Bar-Right li{<br />margin-top:-7px;<br />}<br /><br />#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit{<br />font-size:9pt;<br />font-family:cambria;<br />font-weight:Bold;<br />text-transform:uppercase;<br />color:#fff;<br />text-shadow:0 -1px 1px rgba(0,0,0,0.25);<br />letter-spacing: 1px;<br />padding:6px;<br />border-radius:3px;<br />-moz-border-radius:3px;<br />-webkit-border-radius:3px;<br />}<br /><br />#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active{<br />position: relative;<br />top: 1px;<br />box-shadow:none;<br />}<br /><br />#SYB-Bar-Left .Home a{<br />background:#143eb4;<br />}<br /><br />#SYB-Bar-Left .Home a:hover{<br />background:#1556fa;<br />}<br /><br />#SYB-Bar-Right .Subscribe{<br />margin-top:-14px;<br />}<br /><br /><br /><br />#SYB-Bar-Right .btt a{<br />background:#00810b;<br />margin-left:3px;<br />}<br /><br />#SYB-Bar-Right .btt a:hover{<br />background:#06b421;<br />}<br /><br />.SYB-emailsubmit{<br />background:#ce1527;<br />cursor:pointer;<br />border:none;<br />height:26px;<br />width:90px;<br />}<br />.SYB-emailsubmit:hover{<br />background: #f02a37;<br />}<br />.textarea{<br />border:1px solid #aaaaaa;<br />-moz-border-radius:3px;<br />-webkit-border-radius:3px;<br />border-radius:3px;<br />resize:none;<br />font-size:8pt;<br />font-family:verdana;<br />width:170px;<br />height:25px;<br />color:#000000;<br />}<br /><br />#share-top{<br />background: #f9f9f9;<br />border:1px solid #dddddd;<br />line-height: 1;<br />margin: -4px 0 0 60px;<br />padding: 10px 0 2px 5px;<br />-moz-border-radius:3px;<br />-webkit-border-radius:3px;<br />border-radius:3px;<br />}<br /><br />#share-top li {<br />display: block;<br />margin-right: 0;<br />}<br /><br />#facebook-widget,#google-widget,#twitter-widget {display:none; }<br />@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){<br />#SYB-Bar-Container{<br />display:none;<br />}<br />}<br />



  

Step 2 : Adding CSS code The Bar Styles

1. Now find for  </body> tag


2. add the following script code below just before </body>  tag  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <br /><script><br />//<![CDATA[<br />var b = $("#SYB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});<br />//]]><br /></script> <br /><script><br />$(document).ready(function(){// fade in .btt<br />$(function () {$(window).scroll(function (){});// scroll body to 0px on click <br />$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});<br /></script> <br /><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script><br /><script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script><br /><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>


Note: In case you have already included the jQuery library in
your blog then remove Line 1 . The same applies for Line 12 ,13 and 14
as well if you have included Facebook , Google+ and Twitter scripts
respectively.




Step 3 : Adding The HTML code

1. Now search for <body tag  and add the following code just below it If you are using default blogger templates then search for <body tag. See Video tutorial below for more details information. 


2. add the following code below just below of code  <body tag 


3. Hit the Save Template button and preview your blog to see how the bar appears.

<div id='SYB-Bar-Container'><br /><div id='SYB-Bar-Container'><br /><div id='SYB-Bar-Content'><br /><ul id='SYB-Bar-Left'><br /><li class='Home'> <a href='http://helpsblogging.blogspot.com/'>Home</a> </li><br /><li class='Share'> <div id='share-top'><br /><ul><br /><li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li><br /><li> <g:plusone size='medium'></g:plusone> </li><br /><li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'><br /></div><br /></li><br /></ul><br /><div style='clear:both;'><br /></div><br /></div><br /></li><br /></ul><br /><ul id='SYB-Bar-Right'><br /><li class='Subscribe'> <div class='SYB-email'><br /><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=helpsblogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><br /><input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='helpsblogging'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form><br /><a href="href='http://helpsblogging.blogspot.com/" title="helpsblogging.blogspot.com" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div><br /></li><br /><li class='btt'> <a href='#top' title='Back to top'>Slide to Top ↑</a> </li><br /></ul><br /></div><br /></div><br />





Note: before installing the html code, you first have to change the blog url and the url feed first post with a link url and link url fedd blog post from your blog to redirect to your blog.



Line No. 4 :

<li class='Home'> <a href='http://helpsblogging.blogspot.com/'>Home</a> </li>

Replace http://helpsblogging.blogspot.com/ with your blog URL.



Line 15:

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=helpsblogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>



Line 16:

<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>



Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name.





Video Tutorial :









Credit:

This blogger widget created by Prayag from Stylifyyourblog and I share again on http://helpsblogging.blogspot.com/.

If you have any ideas or questions about this widget then feel free to share with us. :)





Happy Blogging....

• Home


• 
  

  
  
  • Tweet
  
  
  
  
  • 
    
    
    
  
  

  
  

  
  

  
  
  
  

• 
  

  
  

  
  
  
  


• Slide to Top ↑

How To Add Scrolling Sticky Bar To Blogger?

On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the t...

Read more »

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div dir="ltr" style="text-align: left;" trbidi="on"><br />This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><br /><br /><h2><br />Shorthand Background Code</h2><br />The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><br /><table border="0" cellspacing="0" class="example"><tbody><br /><tr><th>Source Code</th><th>Result</th></tr><br /><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"><!--<br /> Codes by HTMLcodes.me --> <div style="background:#eee <br />url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) <br />repeat fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p><br /></div><br />

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.

Example:

<body style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed;"> ... </body>

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Choose a color with the HTML color picker.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;"><br />This text has got a background color applied. You could also apply background color to the whole page if you like.</p><br />	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px"><br />This div tag has got a background image. You could also apply a background image to the whole page if you like.</div><br />	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code

Result

<!--<br /> Codes by HTMLcodes.me --> <div <br />style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG);<br /><br /> background-repeat:repeat;<br /> background-attachment:fixed;<br /> overflow:scroll;<br /> width:200px;<br /> height:100px;"><br /><p><br />This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p><br /></div><br />

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html

HTML Background Code

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s320/DSCF0494.JPG" width="563" /></a></div><br /><h2>Shorthand Background Code</h2>The quickest HTML code for backgrounds is the <code>background</code> property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The <code>background</code> property is a shorthand property for setting all background properties at once. <br /><table border="0" cellspacing="0" class="example"><tbody><tr><th>Source Code</th><th>Result</th></tr><tr><td><textarea class="exampleCode" cols="70" name="bodyText" rows="3" style="height: 91px; width: 386px;"><!-- Codes by HTMLcodes.me --> <div style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed; overflow:scroll; width:200px; height:100px;"><p>This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p></div>

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.
Example:
<body style="background:#eee url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG) repeat fixed;"> ... </body>

Alternative Background Codes

Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

Background Color

This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.
Choose a color with the HTML color picker.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <p style="background-color:#0f0;color:black;width:200px;">This text has got a background color applied. You could also apply background color to the whole page if you like.</p>	This text has got a background color applied. You could also apply background color to the whole page if you like.

Background Image

This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

Source Code	Result
<!-- Codes by HTMLcodes.me --> <div style="background-image:url('http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG');color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image. You could also apply a background image to the whole page if you like.</div>	This div tag has got a background image. You could also apply a background image to the whole page if you like.

Fixed Background Image

You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).

Source Code

Result

<!-- Codes by HTMLcodes.me --> <div style="background-image:url(http://1.bp.blogspot.com/-_aidXOZSyS8/UTg3Gxg40II/AAAAAAAAEKs/cYFzSKP-XMo/s1600/DSCF0494.JPG); background-repeat:repeat; background-attachment:fixed; overflow:scroll; width:200px; height:100px;"><p>This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.</p></div>

This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

http://ajabingung.blogspot.com/2013/03/html-background-code.html