Hello,

I'm trying to make an sprite on the attached CSS code. When I select width and height of the sprite, it does select the correct image.

However, the width and height does not match the real width and height (depends on the client pc resolution).

How can I solve this?

Under #wrapper (look at the code), I try to change body.png for sprite.png, but I can set the right width and height...

a.tabledrag-handle:hover{text-decoration:none;} /*estaba*/
.element-invisible{position:absolute !important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);}
.element-invisible.element-focusable:active,.element-invisible.element-focusable:focus{position:static !important;clip:auto;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
ul.inline,ul.links.inline{display:inline;padding-left:0;}
ul.inline li{display:inline;list-style-type:none;padding:0 0.5em;}
.breadcrumb{padding-bottom:0.5em;}
ul.primary li a:hover{background-color:#eee;border-color:#ccc;border-bottom-color:#eee;}
.form-item,.form-actions{margin-top:1em;margin-bottom:1em;}
label{display:block;font-weight:bold;}
body{
margin:0;
padding:0;
background:#edf5fa;
color:#000;
font-family: Verdana, sans-serif;
font-size: 76%;
line-height: 170%;
}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-weight:normal;font-family:Helvetica,Arial,sans-serif;}
h1{font-size:170%;}
h2,#center h1{font-size:160%;line-height:130%;}
p{
margin:0.6em 0 1.2em;
padding:0;
color: #000;
}
a:link,a:visited{color:#027AC6;text-decoration:none;}
a:hover{color:#0062A0;text-decoration:underline;}
a:active,a.active{color:#5895be;}
ul,.block ul,ol{margin:0.5em 0 1em;padding:0 0 0 1.5em;}
ul,ul li.leaf{list-style-image:url(/menu-leaf.gif);}
ul.menu,.item-list ul{margin:0.35em 0 0 -0.5em;}
ol li,ul li,ul.menu li,.item-list ul li,li.leaf{margin:0.15em 0 0.15em .5em;padding-bottom:.1em;}
ul li.leaf a,ul li.expanded a,ul li.collapsed a{display:block;}
ul.inline li{background:none;margin:0;padding:0 1em 0 0;}
img,a img{border:none;}
th a:link,th a:visited{color:#6f9dbd;}
span.form-required{color:#ffae00;}
#center form{margin-bottom:2em;}.form-actions{margin:2em 0 1em;}
#skip-link{left:50%;margin-left:-5.25em;margin-top:0;position:absolute;width:auto;z-index:1000;}
#skip-link a,#skip-link a:link,#skip-link a:visited{background:#444;background:rgba(0,0,0,0.6);color:#fff;display:block;font-size:0.94em;line-height:1.7;margin-top:1px;padding:2px 10px;text-decoration:none;-khtml-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;-webkit-border-top-left-radius:0;-webkit-border-top-right-radius:0;border-radius:0 0 2px 2px;}
#skip-link a:hover,#skip-link a:active,#skip-link a:focus{outline:0;}
#wrapper{
background-color: #edf5fa;
background-image: url(/body.png);
background-repeat: repeat-x;
background-position: 50% 0;
}
#wrapper #container{width:560px;margin:0 auto;padding:0 20px;}
body.fluid-width #wrapper #container{width:auto;max-width:1270px;}
#wrapper #container #header{height:80px;}
#wrapper #container #header #logo-floater{position:absolute;}
#branding,#branding a:link,#branding a:visited{line-height:120px;position:relative;z-index:2;white-space:nowrap;}
#branding span{font-weight:bold;}#branding img{padding-top:14px;padding-right:20px;float:left;}
#wrapper #container #center{float:left;width:100%;}
.block .content{margin:0.5em 0;}
#wrapper #container #center #squeeze{background:#fff url(/bg-content.png) repeat-x 50% 0;position:relative;}
#wrapper #container #center .right-corner{background:transparent url(/bg-content-right.png) no-repeat 100% 0;position:relative;left:10px;}
#wrapper #container #center .right-corner .left-corner{padding:60px 25px 5em 35px;background:transparent url(/bg-content-left.png) no-repeat 0 0;margin-left:-10px;position:relative;left:-10px;min-height:400px;}
#wrapper #container .region-footer{float:none;clear:both;text-align:center;margin:4em 0 -3em;color:#898989;}
#wrapper #container .breadcrumb{position:absolute;top:15px;left:35px;z-index:3;}
div#branding{font-family:Helvetica,Arial,sans-serif;}
div#branding strong{font-weight:normal;}
#branding,#branding a:link,#branding a:visited{color:#fff;text-shadow:#1659ac 0px 1px 3px;font-size:1.5em;}
#branding a:hover{text-decoration:none;}#wrapper #container .breadcrumb{font-size:0.92em;}
#wrapper #container .breadcrumb,#wrapper #container .breadcrumb a{color:#529ad6;}
#highlighted{padding:1em;background-color:#fff;border:1px solid #e0e5fb;margin-bottom:2em;}
#overlay #overlay-tabs li a:hover,#overlay #overlay-tabs li a:focus{background:#fff;}
ul.main-menu{margin:0;padding:0;float:right;position:relative;z-index:4;}
ul.main-menu li{margin:0;padding:0;float:left;background-image:none;}
ul.main-menu li a,ul.main-menu li a:link,ul.main-menu li a:visited{
display:block;
margin:0 1em;
padding:.75em 0 0;
color:#fff;
background-color: transparent;
background-image: url(/bg-navigation-item.png);
background-repeat: no-repeat;
background-position: 50% 0;
}ul.main-menu li a:hover,ul.main-menu li a.active{
color:#FFF;
background-image: url(/bg-navigation-item-hover.png);
background-repeat: no-repeat;
background-position: 50% 0;
}
ul.secondary-menu li a,ul.secondary-menu li a:link,ul.secondary-menu li a:visited{display:block;margin:0 1em;padding:.75em 0 0;color:#cde3f1;background:transparent;}
ul.secondary-menu li a:hover,ul.secondary-menu li a.active{color:#cde3f1;background:transparent;}
#wrapper #container #header h1,#wrapper #container #header h1 a:link,#wrapper #container #header h1 a:visited{text-shadow:none;color:#000;}