Hi - I’d like to have a post-it.gif as a background url in the css and then write different things on it in the html, kindof “what’s new today” in my header in a post-it note.
Here’s a sample gif (except I need a top-left corner added, and no white background in the gif, must find an artist to do that):
My understanding is that I need to set the position of the url in the css, and then have a postit.php include file for my html where I can change the wording easily.
then there must be a way to do it with a post-it note? Please is someone able to take that gif and create a sample of unique writing on it - e.g. see this page where it’s in context:
The easiest way to go about it is to have
<div class=“postit”>Text to appear on the post-it goes here</div>
and then have
div.postit {background:yellow url(postit.png);}
You would probably also need to set a height and width there, to ensure that it is exactly the same size as the background image, and probably some padding as well to keep the text away from the edges.
You will need to think about how you want it to work if the text is too large to fit on the note, bearing in mind that some people will have a larger text size than you.
where .postit contains a repeat-y bg of the body of your note
and .postit .top a no-repeat of the top, similarly .postit .bottom a no-repeat of your bottom.
Stevie D - can I have background transparent? Because the post-it note is gradient yellow so I’m concerned bg yellow will over-ride the gradient yellow in the png?
dresden phoenix - please can you give actual css? I’m too newbie to understand your instructions - I just understand Stevie’s height, width, padding
team1504 - that page doesn’t load, instead I get msg: “This page demonstrates the use of the HTML 5 Client-side Database Storage API. Any notes you create will be saved in a database on your local hard drive, and will be reloaded from that database the next time you visit this page.”
This is not what I need, is it? since I don’t want to save notes on my visitors’ hard drives.
The background colour is behind the image - the main reason for including it is in case the image doesn’t load, for whatever reason, it will show the background colour instead, so you want a background colour that is similar to the main colour of the image. If the image loads (and doesn’t have any transparent areas) then you won’t see the background colour at all.
No, I do not think it is exactly what you are looking for.
But it uses HTML 5 storage and I believe only works in Chrome and Safari because of webkit vendor specific styling.
I apologise for the and example.
The web storage would allow the user to have the same contents in the sticky note that they typed the next time when they visit the page even if they refresh.
When I read you post, This bookmark was the first thing that came to mind.
It looks like Stevie D is on the right track based on what you are looking for.
As more posts are made, I will keep reading and giving input to help you
thank you! Can anyone translate dresden’s post into actual css for me?
where .postit contains a repeat-y bg of the body of your note
and .postit .top a no-repeat of the top, similarly .postit .bottom a no-repeat of your bottom.
Stevie’s sounds simplest but I’d like to see what dresden’s does as well.
what I meant was this:
you will need to break your postit image into 3 parts, the top, a slice of the midle which will repeat vertically and the bottom. Well call the files top.jpg, middle.jpg, and bottom.jpg
.postit {background: url(middle.jpg) repeat-y; width(width of postit image)px}
.postit .top{background: url(top.jpg) no-repeat top left; padding-top:(height of top.jpg)}
.postit .bottom{background: url(bottom.jpg) no-repeat bottom left; padding-bottom:(height of bottom.jpg)}
your mark up will then be this
You can’t really make the middle part repeat, it’s not a pattern.
The only CSS solution is to use the image as a whole, as a background or not. You need to catter for fixed size text, if you can’t make the backgound stretch.
There is the CSS3/JS solution where you rotate. I’m not sure it’ll look great, though.
Thank you! So my understanding is that I must use Stevie’s
div.postit {background:yellow url(postit.png);}
and since I can’t stretch the bg image, I must fix the text size - I forget what to use for this? except I know it’s not em! Is it px? I’m getting confused with pt…
Thanks! found I had to put the padding on the p’s. If I put it on the box, then the yellow showed on right + btm depending on how big I made their padding.
(1) Do I need “scroll” anywhere in there? I see for another bg url I have in css:
(2) BUT in FF if I zoom in, the text still gets bigger even though I use px.
(3) AND IE 6/7 + FF display the box’s top margin differently. IE8 + FF have the correct position I want. IE 6/7 moves the box up too close to the google box.
The zoom browsers make for us can zoom the text only or the text and images too.
When you choose: Zoom -> Zoom Text Only, images will not be made bigger and, if the parent has the default for the overflow, the text will break free from it.
The way I see it, you have two options: try to tinker with what you have now, a text-background image combination, or, try to make the whole thing an image. That way, you can also make the text follow the slant of your post-it background image. It means you have to periodically make changes in that image, which is not that productive, especially if there is another non-tech user in charge with the mods.
Or, you could opt for SVG for browsers that support it and let the text-background image combo be the fallback for those less fortunate browsers.
