Ribbon and hover movement

[toplisek]

I tried to move background but it will move only my link:

.tothetop1{
 position: relative;
 float: left;
 width: 100%;
 min-height: 1px;
 padding-left: 0 0;
 text-align: center;
}
.tothetop1 a {
 padding-top: 26px;
}
.tothetop1 a:focus, .tothetop1 a:hover {
 padding-top: 23px;
}
.tothetop1 a {
 font-family: Arial;
 background: rgba(0, 0, 0, 0) url("../images/icons/toUphouse1.png") no-repeat scroll center 75% / 110px calc();
 display: inline-block;
 width: 110px;
 height: 72px;
}
.tothetop1 a:focus, .tothetop1 a:hover {
 background-position: center 75.14%;
}

and HTML code:

<div class="tothetop">
<a href="#"><span>To the Top link</span></a>
</div>

How to move also background as it seems not working. I have left out calc() as this should working when it is placed.

[not2easy]

Especially when there is an image to manage it is easier to position the container than the hover property. There are a few minor errors in the css such as where you have
padding-left: 0 0;
try
padding-left: 0;

When an element has a width of 100%, float does nothing, that can go away. The calculations in size are managed better by using the container (<div> ) than by the <a element.

Is the <div class="tothetop"> supposed to move to the top or is the anchor at the top supposed to change appearance when hovered/clicked? Sorry if I'm missing something here.

[toplisek]

Please post whole CSS to test. padding-left: 0; does not relate to the above function. There is missing code as testing:
The calculations in size are managed better by using the container (<div> ) than by the <a element.
Sorry

[not2easy]

Sorry but I did not make the changes, I offered suggestions on what you should change. Given that I can only see what you have posted I can't replicate and test it all.

The first selector in your css is for the container div and it has the padding-left set to 0 0;

.tothetop1{
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 0 0;
text-align: center;
}

while the property "padding-left" is only one number, there can't be two numbers (0 0) or it will be ignored.

Set the size controls to the div that contains the background image, not to the link (a element) as it is shown:

.tothetop1 a {
font-family: Arial;
background: rgba(0, 0, 0, 0) url("../images/icons/toUphouse1.png") no-repeat scroll center 75% / 110px calc();
display: inline-block;
width: 110px;
height: 72px;
}

I did not rewrite the css because I do not know what the intent of some of it (ex. "75% / 110px calc();") is. I can not see the purpose of relative positioning or "float: left;" used with "width: 100%;" so I did not attempt to rewrite your code, I only made suggestions. If you move the size controls shown for the "a" element to the container <div> you would have conflicting variables ("float: left;" vs "display: inline-block;" and "width: 100%;" vs "width: 110px;" for example) so those choices are up to you.