html - li from the image/icon

Question

I want to hear about how I put the text to be straight out from the picture which is like the roof,

CSS:

ul.bruger {
    list-style-position: inside;
}
.login {
    list-style: none;
    background-image: url('/img/topmenu/login.png');
    background-repeat: no-repeat;
    backgroud-position: 0px 0px; /* ret til så det passer */
    padding: 5px 10px;
    border-right: 2px solid #a9a9a9;
    margin: 2px;
}
.login p {
    margin: 0 0 0 20px;
}

HTML:

<ul class="bruger">
<li class="login"><p>Login</p></li>
<li class="login"><p>Make</p></li>
</ul>

problem can be seen here: http://billedeupload.dk/?v=FcSx.png

I want it to look like this: http://billedeupload.dk/?v=wSQfe.png

Answer 1

你可以把你的背景居中，我猜这是你的形象：

.login {
  background-position: 10px center;
}

第一个值是水平位置，第二个值是垂直位置。