CSS: 'Background-size' and 'background-repeat: repeat' stretch issue - 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