7 replies [Last post]
dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 30 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

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.

AttachmentSize
image-1.png78.59 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 30 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

gary.turner wrote: You didn't

gary.turner wrote:

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/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 30 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

gary.turner wrote: The 26px

gary.turner wrote:

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

Output: http://gecpatan.tk/working/index-1.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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

AttachmentSize
border-image.png 31.03 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dhruvpatel
dhruvpatel's picture
Offline
newbie
Patan
Last seen: 7 years 30 weeks ago
Patan
Timezone: GMT+5.5
Joined: 2013-04-10
Posts: 7
Points: 13

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.