Ekstra menu / profil indhold her
<style>
/* FF3.6+ */
background: -moz-linear-gradient(top, #6b6b6b 0%, #000000 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b6b6b), color-stop(100%,#000000));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #6b6b6b 0%,#000000 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #6b6b6b 0%,#000000 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #6b6b6b 0%,#000000 100%);
/* W3C */
background: linear-gradient(to bottom, #6b6b6b 0%,#000000 100%);
/* IE 5.5 - 7, 9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#000000',GradientType=0 );
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000,GradientType=0)";
</style>
Test Boks - indeholder ingen billeder og er testet i chrome, firefox, IE9
kol-left
kol-right
<style>
#testbox{
width:500px; height:150px; border:1px solid #CCCCCC; margin:10px; overflow:hidden;
}
#kol-right{
width:50%; height:100%; float:right;
background: linear-gradient(left, #6b6b6b, #000000);
background: -o-linear-gradient(left, #6b6b6b, #000000);
background: -moz-linear-gradient(left, #6b6b6b, #000000);
background: -webkit-linear-gradient(left, #6b6b6b, #000000);
background: -ms-linear-gradient(left, #6b6b6b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=1)";
}
#kol-left{
width:50%; height:100%; float:left;
background: linear-gradient(right, #6b6b6b, #000000);
background: -o-linear-gradient(right, #6b6b6b, #000000);
background: -moz-linear-gradient(right, #6b6b6b, #000000);
background: -webkit-linear-gradient(right, #6b6b6b, #000000);
background: -ms-linear-gradient(right, #6b6b6b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=1)";
}
</style>
<div id="testbox">
<div id="kol-left"></div>
<div id="kol-right"></div>
</div>
Test Boks 2 hvis man vil have et overlay til text - indeholder ingen billeder og er testet i chrome, firefox, IE9.
kol-left2
kol-right2
<style>
#testbox2{
width:500px; height:150px; border:1px solid #CCCCCC; margin:10px; overflow:hidden;
}
#overlay{
position:relative; top:25px; text-align:center; z-index:1;
}
#kol-right2{
position:relative; top:-95px;
width:50%; height:100%; float:right;
background: linear-gradient(left, #6b6b6b, #000000);
background: -o-linear-gradient(left, #6b6b6b, #000000);
background: -moz-linear-gradient(left, #6b6b6b, #000000);
background: -webkit-linear-gradient(left, #6b6b6b, #000000);
background: -ms-linear-gradient(left, #6b6b6b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=1)";
}
#kol-left2{
position:relative; top:-95px;
width:50%; height:100%; float:left;
background: linear-gradient(right, #6b6b6b, #000000);
background: -o-linear-gradient(right, #6b6b6b, #000000);
background: -moz-linear-gradient(right, #6b6b6b, #000000);
background: -webkit-linear-gradient(right, #6b6b6b, #000000);
background: -ms-linear-gradient(right, #6b6b6b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=1)";
}
</style>
<div id="testbox2">
<div id="overlay"><h1>Overlay</h1></div>
<div id="kol-left2"><p>kol-left2</p></div>
<div id="kol-right2"><p>kol-right2</p></div>
</div>
Test Boks3 - indeholder ingen billeder og er testet i chrome, firefox, IE9
row-top3
row-bottom3
<style>
#testbox3{
width:500px; height:150px; border:2px solid #CCCCCC; margin:10px; overflow:hidden;
}
#row-top3{
width:100%; height:50%;
background: linear-gradient(top, #000000, #6b6b6b);
background: -o-linear-gradient(top, #000000, #6b6b6b);
background: -moz-linear-gradient(top, #000000, #6b6b6b);
background: -webkit-linear-gradient(top, #000000, #6b6b6b);
background: -ms-linear-gradient(top, #000000, #6b6b6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=0)";
}
#row-bottom3{
width:100%; height:50%;
background: linear-gradient(top, #6b6b6b, #000000);
background: -o-linear-gradient(top, #6b6b6b, #000000);
background: -moz-linear-gradient(top, #6b6b6b, #000000);
background: -webkit-linear-gradient(top, #6b6b6b, #000000);
background: -ms-linear-gradient(top, #6b6b6b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=0)";
}
</style>
<div id="testbox3">
<div id="row-top3"><p>row-top3</p></div>
<div id="row-bottom3"><p>row-bottom3</p></div>
</div>
Test Boks 4 hvis man vil have et overlay til text - indeholder ingen billeder og er testet i chrome, firefox, IE9.
row-top4
row-bottom4
<style>
#testbox4{
width:500px; height:150px; border:2px solid #CCCCCC; margin:10px; overflow:hidden;
}
#overlay4{
position:relative; top:25px; text-align:center; z-index:1;
}
#row-top4{
position:relative; top:-95px;
width:100%; height:50%;
background: linear-gradient(top, #000000, #6b6b6b);
background: -o-linear-gradient(top, #000000, #6b6b6b);
background: -moz-linear-gradient(top, #000000, #6b6b6b);
background: -webkit-linear-gradient(top, #000000, #6b6b6b);
background: -ms-linear-gradient(top, #000000, #6b6b6b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b, GradientType=0)";
}
#row-bottom4{
position:relative; top:-95px;
width:100%; height:50%;
background: linear-gradient(top, #6b6b6b, #000000);
background: -o-linear-gradient(top, #6b6b6b, #000000);
background: -moz-linear-gradient(top, #6b6b6b, #000000);
background: -webkit-linear-gradient(top, #6b6b6b, #000000);
background: -ms-linear-gradient(top, #6b6b6b, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#6b6b6b, endColorstr=#000000, GradientType=0)";
}
</style>
<div id="testbox4">
<div id="overlay4"><h1>Overlay</h1></div>
<div id="row-top4"><p>row-top4</p></div>
<div id="row-bottom4"><p>row-bottom4</p></div>
</div>
Hvis du anvender sticky footer som på denne side, så placer din gradient kode i html taggen "html" i dit style sheet
fixer screen size: "background-attachment: fixed !important;" Firefox og Chrome fix
<style>
html {height:100%; width:100%; overflow:-moz-scrollbars-vertical; overflow-y:scroll;
background: linear-gradient(top, #000000, #6b6b6b);
background: -o-linear-gradient(top, #000000, #6b6b6b);
background: -moz-linear-gradient(top, #000000, #6b6b6b);
background: -webkit-linear-gradient(top, #000000, #6b6b6b);
background: -ms-linear-gradient(top, #000000, #6b6b6b);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000, endColorstr=#6b6b6b);
background-attachment: fixed !important;
}
</style>
Hvis du vil anvende et billede og give det den perfekte stretch. Vil jeg anbefale følgende
<style>
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
Click here:
my button