Negative Offset Position on CSS Background Image

Posted on November 15, 2015 by Dan Doicaru in HTML/CSS Category with Easy Difficulty

There are many cases when you need to place a background image with negative offset position to a div or another container. It helps you to avoid absolute positioning and extra css code that saves file size.

As an example, think about a background image you want to place it on a container (using background-position), to the right bottom of the container, but with 30 pixels more in the right and 30 pixels more in the bottom.

Full HD Tutorial

To achieve the negative offset positioning you must use the css background-position property, together with a background image. I will show you few examples below.

Negative Offset Position CSS Background Image

Negative Offset Background Position with Percent Values

If you want to use the negative offset properly you can use percent values bigger than 100% to position them outside of the container. Check below:

background: url("image.png") no-repeat 105% 105%;

The example above is useful, but not very precise. If you want to add an offset of exactly 30 pixels for example, you can't. The percent value will calculate the pixels from the main container width or height.

Negative Offset Background Position with Double Values

There is another trick to position a background image outside the container on the right or bottom with (same as adding negative values for left and top).

background-position: right 50px bottom 50px;

This is great to use when you have some icons or images and you want to place them in right or bottom corners, outside the container (which means offset positioning). You can check the live example below, where I added a simple png image to the top right corner, specifying the position in negative pixels too.

Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Related Articles
Comments
  1. Gravatar Icon Gopal:

    Hi,

    In your example image is clipping. It is possible to show the image without clipping outside the div area?

    Thanks!

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 9 = 15

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.