homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Fluid-height "Post-It Note"

5+ Year Member

Msg#: 4328027 posted 6:58 pm on Jun 19, 2011 (gmt 0)

What I'm trying to do is make a Post-It Note that has text "written" on it. This text could be a few words, or a few very long paragraphs. The post-it must adjust height to accommodate its contents. However, I don't want it to adjust width. Also, the post-it should never have a height of less than it's width.

What I did was create a square post-it image in photoshop, and then set that as the background image to a div containing the text.

When the length of the text doesn't fit inside the div, you can see the problem: I either get another post-it image (if the background is repeating), or I run off the edge of the one post it note (if no-repeat).

How can I make the post-it background graphic change heights so that the entire text fits on it?



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4328027 posted 8:03 pm on Jun 19, 2011 (gmt 0)

Slice it into three... a top, middle and bottom.

- lock the top in place (no-repeat)

- make the middle dynamic height, (set min-height and repeat-y)

- pop the bottom in after middle paints (no-repeat)


WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 4328027 posted 11:21 pm on Jun 19, 2011 (gmt 0)

CSS3 offers background-size which, as the name suggests, can be used to size (and consequently stretch) the background-image. However, browser support, although improving, is not there yet with this one.

Even if background-size was available, I think lexipixel's solution would be the preferred method.


5+ Year Member

Msg#: 4328027 posted 8:03 pm on Jun 21, 2011 (gmt 0)

Yeah, I figured that was how to do it. Anyway, looks good now! Thanks guys.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved