January 23rd, 2004, 12:18 AM
css/div to place text on an image while graying out the background image
I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash?
January 23rd, 2004, 02:43 AM
Yes, it is possible.
The first part can be done through css using the position properties. If you aren't already somewhat familiar with css, I'd recommend reading a guide, but what I'd do is something like this:
The key part is the style portion of the <div>, which determines where the image or text is placed in relation to the top left corner of the browser's client area (or the parent div, if nested). The value after 'top' specifies how far down from the top of the page the top of the image or text block is (100 pixels), and the 'left' does the same thing from the left.
<div style="position: absolute; left: 100px; top: 100px;"><img src="mypicture"></div>
<div style="position: absolute; left: 100px; top: 100px;">
This is my blog entry. The top left corner of this block of text
is in the same place as the top left corner of the image.
Current mood: Stoked!
Note that another and possibly better way to do the same thing is to simply make the image a background to the <div> containing the text. It is important to remember that the size of the div should be specified according to your needs, and doing so may clip the picture or cause it to repeat.
The other part, graying out the photo, is a bit more difficult. It wasn't clear to me whether you meant graying out only the part of the photo that is covered by the text, or if you meant the whole thing. If you mean the whole thing, I would simply edit the image. If you meant only a portion of the photo would be covered and grayed out, the only way I know of involves using some of the proprietary css plugins that IE has, and I wouldn't recommend depending on this as the effect wouldn't be viewable to anyone using a different browser. Other browsers have similar properties, but I am not sure about the syntax.
<div style="width: 75%; height: 200px; background: url(myimage);">
This is my blog entry. The div is 75% of the browser's width, which
means that the image may tile if the browser is resized unless you
specify differently. Similarly, if the height of the image is greater
than the 200 pixels specified, the bottom would be cropped off.
Current mood: Stoked!
A variation to consider: have 2 images available: a grayed out copy of the image for use as the text background, and the regular one. You could have a <div> with the overflow clipped and position the grayed-out one in the same spot as the regular one, but only the unclipped portion would be visible and the size you specify for use as the text background.
Obstruct the doors, cause delays, be dangerous.