CSS中的repeat-x问题

Question

Repeat-x property for CSS is not working as required.

I have a 50px image (to be used as background image).

I take a 200px div and set the 50px image as background with repeat-x css property.

The problem I am facing is 4 images (4 * 50px = 200px) are correctly drawn and a little portion of the image is also drawn at the end. As I think this extra portion should not be drawn. Please help.

css property:

{
 width:200px;
 height:27px;
 position:absolute;
 background:url(./img/common/bg_grid.jpg) repeat-x left top;
  background-size:50px 27px;
 }

from above link you may find correct background image

Answer 1

There is a certain level of margin or padding that is inheriting its default value from the nested/parent elements. You need to reset them in order to get what you are looking for.

From your above code, For Instance,

{
 width:200px;
 height:27px;
 position:absolute;
 background:url(./img/common/bg_grid.jpg) repeat-x left top;
 background-size:50px 27px;
 padding:0; /* Reset values */
 margin:0; /* Reset values */
 }

EDIT:

As per the updated fiddle provided by the OP, below is the solution.

WORKING DEMO

The CSS Code Change:

<div style="width:900px;height:27px;position:absolute;top:150px;right:100px;background:url(http://i.stack.imgur.com/5ebiu.jpg) repeat-x left top;overflow:hidden;background-size:45px 28px;background-repeat: space;margin:0;padding:0"></div>

Hope this helps.

Answer 2

try this one

.content
{
    display:block;
    position:relative;
    float:left;
    width:1000px;
    background:#ccc;
    height:300px;
}

http://jsfiddle.net/c9j2D/7/