Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I'm trying to set a background image for a given <a> component but it's not working:
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<style>
.my-background{
background-image: url('/images/link1.jpg');
}
</style>
<window title="new page title" border="normal" width="400px" height="400px">
<a sclass="my-background">My Link</a>
</window>
</zk>I've already tried to put an image from web (http://www.plugmasters.com.br/downloads/icones/banco-de-icones/template/aqua-button.png) instead of a local image and it didn't work too.
Thank you,
Gyo
You can do this:
<zk>
<style>
.my-background{
background-image:url(http://www.pageresource.com/images/scare.jpg);
}
</style>
<window title="new page title" border="normal" width="400px" height="400px">
<a sclass="my-background">My Link</a>
</window>
</zk>
Seems the used png image from the bank site have withe spaces around the button. I played a little bit with it and cut these white spaces and save the image as a gif.
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<style>
.my-background{
background-image:url(http://www.forsthaus.de/aqua-button.gif);
no-repeat;
background-size: 100%;
font-size:32px; }
</style>
<window title="new page title" border="normal" width="400px"
height="400px">
<a sclass="my-background">My Link is here!</a>
</window>
</zk>
best
Stephan
Asked: 2011-10-10 15:02:55 +0800
Seen: 248 times
Last updated: Oct 11 '11
