For storing notes on HTML
They may be utterly unhelpful.
.div-class-name {
position: absolute;
height: 50px;
width: 100%;
top: 300px;
background: url(/img-name.extension) center repeat-x; repeat-y;
background-size: auto 100%;
background-color: #3B2307;
height: 100px;
width: 100%;
width: calc(100% - 100px);
left: 10px;
text-align: left;
font-family: Century Gothic;
color: #55644E; /*text color*/
font-size: 10px;
float: left;
border: 2px outset #E80B04; border: size style color; (style options known: outset, solid)
padding-left:25px;
padding-right: 50px;
padding-top: 100px;
padding-bottom: 25px;
}*/
dunno if this one will work (supposed to create a gradient on each end of horizontal repeating image):
.div-class-name {
height: 50px;
width: 100%;
top: 300px;
background: url(img-url) center repeat-x;
background-size: auto 100%;
position: relative;
display: inline-block;
}
.div-class-name:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}