CSS：“背景尺寸”和“背景重复：重复”拉伸问题

Question

I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.

I have a background image that is a 3px x 3px pattern.

I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).

I have this implementation:

.element {
    width: 100%;
    background-image: url('/path/to/pattern.png');
    background-repeat: repeat;
} 

which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:

.element {
    width: 100%;
    background-image: url('/path/to/pattern.png');
    background-repeat: repeat;
    background-size: 100% 50%;
} 

However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.

Is there any way to simply accomplish this?

Thanks

Answer 1

Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.

Answer 2

How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:

<div id="element">
    <div id="pattern"/>
    <div>I'm at the top!<div>
</div>    

The rules:

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

#element {
    position: relative;
    min-height: 100%;
}

#element #pattern {
    background: url(path/to/pattern.png);
    height: 50%;
    left: 0px;
    position: absolute;
    z-index: -1;
    top: 0px;
    width: 100%;
}

Answer 3

Add another container div

You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.

<div id="container">
<div id="myPattern"></div>

#container{
        width:200px;
        height:400px;
        background-color:black;
    }      

#myPattern
{
    background-color:yellow;
    height:50%;
    width:100%;
    /* fill pattern here */
    background-image: url(tt.png);
    background-repeat: repeat-x repeat-y;
}

JSFiddle