Background image and color fill
background-color: #7f7f7f;
background-image: url('../mytheme/images/myimage.png');
background-repeat: no-repeat;
background-size: 50px 50px;
background-position: 4px 4px;
Displaying An Image At A specific Postiion In The Background
#header .pad {
background: url('/images/my-logo-header.png') no-repeat;
background-size: 50px 100px;
background-position: 0px 10px;
height: 120px;
}
Displaying An Image Offset From Right Edge
.LinksWithArow a {
background: url('images/button-link-arrow.png') no-repeat;
background-size: 16px 16px;
background-position: center right;
padding-right:18px;
min-height: 16px;
}
#header .pad {
background: url('/images/my-logo-header.png') no-repeat;
background-size: 50px 100px;
background-position: top 0px right 10px;
height: 120px;
}
Multiple Background Images
See here.
Use image to fill both width and height
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
Use image to fit width or height
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: contain;
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.