CSS - vendor prefixes for background-image
vendor prefixes for background-image
HTML
<div id="timerContainer">
<div id="timerSurface" >
<div id="timerHeaders" >
<div class="HeaderText NormalWidth">MIN</div>
<div class="HeaderText NormalWidth">SEC</div>
<div class="HeaderText WideWidth">MS</div>
</div>
<div id="timerNumbers">
<div id="minutes" class="bg TimerText NormalWidth">0</div>
<div id="seconds" class="bg TimerText NormalWidth">0</div>
<div id="milliseconds" class="bg TimerText WideWidth">0</div>
</div>
</div>
</div>
CSS
#timerContainer
{
width: 290px;
height:156px;
}
#timerSurface
{
width: 290px;
height:108px;
background-color: #383431;
}
#timerHeaders
{
height:20px;
}
#timerNumbers
{
text-align: center;
font-family: Impact, sans-serif;
font-size: 54px;
color: #D0D0D0;
}
.HeaderText
{
float:left;
height: 20px;
padding: 5px 6px 5px 6px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
color: #D0D0D0;
margin-left: 5px;
}
.TimerText
{
float:left;
height: 60px;
padding: 5px 5px 5px 5px;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #242323;
margin-left: 5px;
vertical-align: middle;
}
.NormalWidth
{
width:68px;
}
.WideWidth
{
width:100px;
}
.bg
{
/* fallback color */
background-color: #000000;
/* fallback image */
background: url(http://johnpapa.net/files/downloads/images/bg.png);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0, 0, 0)),
color-stop(0.46, rgb(11, 111, 211)),
color-stop(0.46, rgb(0, 0, 0)),
color-stop(0.50, rgb(0, 0, 0)),
color-stop(0.50, rgb(11, 111, 211)),
color-stop(1, rgb(0, 0, 0))
);
background: -moz-linear-gradient(
center bottom,
rgb(0, 0, 0) 0%,
rgb(211, 111, 111) 46%,
rgb(0, 0, 0) 46%,
rgb(0, 0, 0) 50%,
rgb(211, 111, 111) 50%,
rgb(0, 0, 0) 100%
);
}