Sat, 2013-04-20 15:10
I Want to do black board effect. Image Files are Attached.
HTML
<div class="box"> <h2>Other</h2> <ul> <li>News</li> <li>Class Timetable</li> <li>Confessionn</li> <li>About</li> </ul> </div>
css :
background: url(images/box-top-right.png) right top no-repeat, url(images/box-top-left.png) left top no-repeat; background-clip:border-box; float: left; border-width: 26px 30px 28px 25px; border-image: url(images/box.png) 26 30 28 25 fill repeat; }
Now the problem : It is hard to explain so Please See Image-1. Because of Flexibility I want to give box class width in Percentage. When I use Background Images' Positions right top and left top they don't go to very top. They Lives 26px below the top edge of box. I used Background clip to Border-Box. Yet it is same.
Note That the top 26px of box.png are kept transperant.
| Attachment | Size |
|---|---|
| image-1.png | 78.59 KB |
Sun, 2013-04-21 21:17
#1
We need more
You didn't provide the necessary images, and your css seems incomplete. Best solution is to provide a link to the page if you can.
cheers,
gary
Mon, 2013-04-22 11:44
#2
gary.turner wrote: You didn't
You didn't provide the necessary images, and your css seems incomplete. Best solution is to provide a link to the page if you can.
cheers,
gary
Ok I have uploaded all files with images to http://gecpatan.tk/working/
Mon, 2013-04-22 20:32
#3
The 26px is the top border.
The 26px is the top border. Try this:
#ref { border: 1px solid black; background-color: green; overflow: hidden; } .box { border: solid green; background: url(box-top-right.png) right top no-repeat, url(box-top-left.png) left top no-repeat; border-width: 0 30px 28px 25px; border-image: url(box.png) 0 30 28 25 fill repeat; display: inline-block; }
cheers,
gary
Tue, 2013-04-23 01:19
#4
gary.turner wrote: The 26px
The 26px is the top border. Try this:
#ref { border: 1px solid black; background-color: green; overflow: hidden; } .box { border: solid green; background: url(box-top-right.png) right top no-repeat, url(box-top-left.png) left top no-repeat; border-width: 0 30px 28px 25px; border-image: url(box.png) 0 30 28 25 fill repeat; display: inline-block; }
cheers,
gary
I tried that yet Problem Occurs.See the out-put. Probably I will have to make change in Image for (First Div-Big One) But the main problem that Background doesn't clip to border box occurs yet. see Box2 and Box3
Tue, 2013-04-23 05:15
#5
quick and dirty
Why not let the border image do the work for you as designed?
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>test doc</title> <!-- hack for bug in Web Developer addon for Firefox. Used for development and debugging only--> <link rel="stylesheet" type="text/css" href="x" /> <style type="text/css"> /*<![CDATA[*/ #ref { background-color: green; } .box { border: solid green; border-width: 26px 30px 28px 25px; border-image: url(border-image.png) 26 30 28 25 fill repeat; display: inline-block; } /*]]>*/ </style> </head> <body> <div id="ref"> <div class="box"> <h2>Other</h2> <ul> <li>News</li> <li>Class Timetable</li> <li>Confessionn</li> <li>About</li> </ul> </div> </div> </body> </html>
I used ImageMagick to crop the bottom of the image border and append it to the top. It's a quick test image that looks close enough for government work.
cheers,
gary
| Attachment | Size |
|---|---|
| border-image.png | 31.03 KB |
Wed, 2013-04-24 02:17
#6
Alternative Solution.
Thanks for this Idea. As I am just working on Personal Project, Just to practice , I will use multiple Backgrounds
for now, If in future this project goes online then I will use Image you provided or make similar image to save too much http requests.
Thanks again,
Dhruv.
Wed, 2013-04-24 03:52
#7
Not tested
I think if you go the background method, the bg images need to go on the parent, and go back to the 0 top border width on the bordered child.
cheers,
gary