固定导航与图像重复-x

Question

I am struggling with making my navigation bar fixed and at the same time let the repeat be "repeat-x". Below is an image of the result when using the css further down.

Here is the css code included in the toplinks (navigation bar).

.toplinks {
    /*float: right;*/
    {vb:stylevar right}:{vb:math {vb:stylevar padding}*2};
    color:{vb:stylevar toplinks_link_color};
    font: {vb:stylevar header_font};
    text-align:{vb:stylevar right};
    background:{vb:stylevar toplinks_background};
    padding-top: 10px;
    height: 35px;
    background-attachment: scroll;
    background-image: url({vb:stylevar imgdir_misc}/top-links-bg.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #633f24;
    z-index: 20;
    position: fixed;
}

The navigation bar was not made by me, but I added "position" and "z-index". I want the bar to go across the page with repeat-x.

Is this possible to do, if so could you help me out?

http://a-trix.net/

Answer 1

Try setting the containing element to position: relative; then set left: 0;

It doesn't look necessarily like a repeat-x issue, more that your element is being pushed across.

Edit:

.toplinks {
color: #eee2d6;
font: normal normal normal 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
text-align: right;
background: none;
padding-top: 10px;
height: 35px;
background-attachment: scroll;
background-image: url(http://a-trix.net/forum/images/primus/sandy/misc/top-links-bg.jpg);
background-position: left top;
background-repeat: repeat-x;
background-color: #633f24;
position: fixed;
width: 100%;
z-index: 1000;
}