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.

Comments

Your email address will not be published. Required fields are marked *