Offset a background image from the right or bottom using CSS

If you want to offset your background image a certain amount of pixels from the right with CSS you can do this by first defining it as right and then count away the pixels.

Say that you wish the background image to start 20 pixels from the right you write your CSS as:

.myclass {
  /* additional styles */
  background-position: right 20px top;
}

This will align your background image to the top right and then offset it 20 pixels to the left. This can also be done as an offset from bottom.

If you want you can also inline the position in the background tag directly. The following will align the background image 20 pixels from the right bottom corner:

.myclass {
  /* additional styles */
  background: url("/images/my-image.png") no-repeat bottom 20px right 20px;
}

Related posts:

Comments

comments powered by Disqus