1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Rep Power

    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?
  2. #2
  3. Bites when cornered
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Back from Iraq!
    Rep Power
    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:
    <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!
    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.
    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.
    <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!
    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.
    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.

IMN logo majestic logo threadwatch logo seochat tools logo