I've found a drawing bug when using stretched 'expand' background with semi-transparent PNG image.
The semi-transparent portions of stretched left, right, top, bottom image are painted with weird solid colors.
You can download my example via the following url:
http://download.yousendit.com/911357A12F308175
I'm using v3.2.2.9 of htmlayout.
You do not need stretch-top, stretch-bottom, etc. there.
Please see: http://www.terrainformatica.com/wiki/doku.php?id=h-smile:expandable-backgrounds
Change your style to:
/* start button */
.startButton{
font-size: 14px;
width: auto;
margin-top: 10px;
padding: 10px 20px;
background-image: url(images/btn.png) ;
background-position: 9px 6px 9px 6px;
background-repeat: expand;
}
.startButton:hover{
transition: blend;
cursor: pointer;
color:#669900;
background-image: url(images/btn_hover.png);
background-position: 9px 6px 9px 6px;
background-repeat: expand;
}stretch-bottom/top for parts containing transparent areas are not working quite well now. But you do not need them there anyway.
I just add them as an example.
And in real life, I use them for mid-part lighting effect.
Is any chance to have this drawing bug being fixed?
Actually, I need either stretch-left and right or stretch-top and bottom to prevent repeating the round corners.
If I cut too much border margin for the corners, the filling in the center might not look that smooth. When the corner areas grow bigger, the center filling might look even worse.
I am not sure I understand your problem (it is hard to do without illustration) but I'll try to fix this.
Thanks very much for looking into it.
You must log in to post.