{"id":163,"date":"2008-08-23T22:23:30","date_gmt":"2008-08-23T20:23:30","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/?p=163"},"modified":"2013-01-15T19:13:56","modified_gmt":"2013-01-15T18:13:56","slug":"how-to-offset-background-from-the-right-or-bottom","status":"publish","type":"post","link":"https:\/\/www.maratz.com\/blog\/archives\/2008\/08\/23\/how-to-offset-background-from-the-right-or-bottom\/","title":{"rendered":"CSS 101: How to offset background from the right or bottom"},"content":{"rendered":"
\n

CSS level: beginner\/intermediate<\/em><\/p>\n<\/div>\n

\n

CSS3 now supports background-position property: http:\/\/www.w3.org\/TR\/css3-background\/#background-position<\/a><\/p>\n<\/div>\n

Background-position<\/code> CSS property allows us to position background image starting from top left corner of a HTML element.<\/p>\n

We are able to position either with some numeric values such as 100%<\/code> and10px<\/code>, or with keywords such as left<\/code> and bottom<\/code>. Either way, you always have to offset it from the top left corner.<\/p>\n

If the design dictates positioning background image to bottom right corner, obviously we would use background-position: 100% 100%;<\/code><\/p>\n

But sometimes we need an offset from the bottom right. And if you also have expanding box, it doesn’t come by default in CSS.<\/p>\n

We are all aware that fixed height layouts are matter of history, but bare with me for a moment \u2014 with fixed width\/height layouts background positioning is fairly easy. You always know where the background image will end, thus you can make it a little bit smaller in size than the element itself.<\/p>\n

For example: if a paragraph is 300px wide, we can set the background-image in a way to leave a 10px wide empty area on the right.<\/p>\n

First, let\u2019s see the rule:<\/p>\n

p {\r\n    width: 260px;\r\n    height: 260px;\r\n    padding: 20px;  \r\n    background: url(image.gif) no-repeat 0 0;\r\n}<\/code><\/pre>\n
\"Cut<\/p>\n
Figure 1. Background image is cropped to 290 x 290px<\/p>\n<\/div>\n
In this example, if we crop the background image to be 290 x 290px, you can easily achieve an effect of background image being 10px shorter and 10px thiner than the paragraph<\/a>.<\/p>\n
I agree, it\u2019s no brainer. But keep reading.<\/p>\n
Flexible is new fixed<\/h2>\n
With liquid or flexible layouts, dimensions of HTML elements are variable (different screen resolutions, window resizing, etc.). Say we have:<\/p>\n
p {\r\n    width: 100%;\r\n    height: 100%;\r\n    background: url(image.gif) no-repeat 100% 100%;\r\n}<\/code><\/pre>\n
I\u2019ve seen developers reach for another element to achieve the offset. And really, if you’re in a hurry, add a child element, offset it with a margin, and then paste the background to that inner element.<\/p>\n
Naturally, there is a better way.<\/p>\n
Open the background image with Photoshop, and choose Image \u2192 Canvas Size (or Command\/Ctrl + Alt\/Option + C)  <\/p>\n
\"Select<\/p>\n
Figure 2. Resizing canvas<\/p>\n<\/div>\n
Enter the values as shown on the Figure 2. (tip: if you check Relative, you can use mathematical operands). When you’re done, hit OK.<\/p>\n
You should have some empty space on the right and bottom.<\/p>\n
\"Empty<\/p>\n
Figure 3. Empty space after Canvas Resize<\/p>\n<\/div>\n
Save image as a GIF with transparency on and voil\u00e1 – it\u2019s always shifted 10px from the bottom and 10px from the right<\/a> (resize your browser window or increase font size when you are checking the example).<\/p>\n
At first, you might wonder where you should use this technique, but once you get your fingers on flexible layouts, you might find this useful.<\/p>\n","protected":false},"excerpt":{"rendered":"
Advanced Cascading Style Sheets trick. Geeks only.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[25,28],"_links":{"self":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/163"}],"collection":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":0,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}