Page Widget How to - Align background image over bottom border line

Question

We would like to know how to align background image over bottom border line.

Answer


<html>
<head>
<style>
.divider {<!--  ww  w. j a  v  a 2  s .c o m-->
  border-bottom: 1px solid #c3c3c3;
  clear: both;
  display: block;
  /*margin-bottom: 20px;
    padding-top: 20px;*/
  width: 100%;
}

.sidearrow {
  background: url(http://www.java2s.com/style/download.png) 50%
    14px no-repeat;
  width: 100%;
  height: 25px;
}
</style>
</head>
<body>
<p>Here is some content above</p>
<div class="sidearrow"></div>
<div class="divider"></div>
<p>Here is some content below</p>
</body>
</html>

The code above is rendered as follows: