Post Archive
› August 31, 2005
Pushing around backgrounds
Up till now, when I've wanted to position an image that's replacing text using one of the techniques, I'd setup the CSS for the image replacement, then use some combination of margins, or outer element padding to shift it into place.
For some reason, it hasn't occurred to me that there's a simpler and more precise way to position a background image, it's almost like absolute positioning without losing the document flow. Simply align the background image to the bottom and the right (with no-repeat). Now adjust the height and width of your element to move the image further to the right or further down.
Nothing groundbreaking.. just hadn't occurred to me so I thought I'd share.
Comments
1. September 1, 2005 04:44 AM
2. September 2, 2005 05:18 AM
Peter Costello Posted…
Nice! Simple and tidy. I shall play with this tonight.
Cheers
3. September 4, 2005 12:48 PM
icexe Posted…
i've found a neat little image replacement trick i like to call Mikey's Image Replacement
I'm not sure if someone else has discovered something similar, but i thought i'd share what worked for me. the trick to making it work is to set overflow: hidden in the container div, and moving the replaced text behind the image using z-index. so far, it seems to work in IE 5+, IE6, Firefox, Opera 7+, i haven't tried it on a Mac yet
here's a demo page. http://icexe.dyndns.org/MIR.htm if it works for you please let me know at icexe@comcast.net
4. October 3, 2005 03:37 PM
Brajeshwar Posted…
I am not really the CSS person but I love CSS as my hobby! I am somehow unable to digest the idea stated in this post! Call me dumb but will you please explain that a bit further. To make it simple, I tried doing an experiment which I presume failed. http://www.oinam.com/experiments/css/pushingaroundbackgrounds/ How do I push away that FOO BAR text if I am not pushing something like text-indent of H1 to a non-scrollable area of the browser?
5. October 3, 2005 04:06 PM
Nate Posted…
Brajeshwar - I think you're example is actually a little more complicated than the idea I was suggesting. In your example you have text content that is part of the element which has a background (h1). If you'd like to use a background image to replace text, you should first check out the various image replacement methods.
In terms of the rest, your test does exhibit the simple concept I'm discussing here.. you're aligning your background to the bottom right, and so it's displayed at the bottom right axis of the element's container (h1 in this case). I hope this helps!
Kevin McDonagh Posted…
Thats a good idea indeed. Simple but never crossed my mind before. Thanks for the snippet.