Repeat-x不起作用-CSS

Question

I have one problem with repeat-x. My css code is this:

#header {
}

#header_left {
background:url("../img/header_l.png") no-repeat;
float:left;
width:341px;
height:258px;
}

#header_content {
background:url("../img/header_c.png") repeat-x;
width:32px;
height:258px;
float:left;
}

#header_right {
background:url("../img/header_r.png") no-repeat;
float:right;
width:341px;
height:258px;
}

And html code:

<div id="header">
        <div id="header_left"></div>
        <div id="header_content"></div>
        <div id="header_right"></div> 
    </div>

But image header_c.png repeats only once. How can I fix this problem?

Here is the screenshot: http://i.stack.imgur.com/mo0JW.png , header_c.png is repeating once and then leaving empty space.

Answer 1

也许您的意思是repeat-y ，即查看HTML元素的尺寸。

Answer 2

If I understand correctly, your error is that between the central and right blocks obtained by the gap. You can fix this by setting the right block float: left or change width of center block.

jsfiddle - my example with your error.

jsfiddle - fix with float: left

jsfiddle - fix with exact size of center block

Answer 3

May be you should try this

#header {
margin: 0 auto;
height:auto;
width:auto;
padding:0px;
}

#header_left {
background:url("../img/header_l.png") no-repeat left top;
width:341px;
height:258px;
}

#header_content {
background:url("../img/header_c.png") repeat-x left top;
width:32px;
height:258px;
}

#header_right {
background:url("../img/header_r.png") no-repeat left top;
width:341px;
height:258px;
}