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 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.
Good and very useful Tutorial. I will implement ‘negative-offset-background-position’ on my own next mockups. Thks.
Html-tuts.com blogs are interesting :)
Hi,
In your example image is clipping. It is possible to show the image without clipping outside the div area?
Thanks!