cssbackground-repeat

CSS: 'Background-size' and 'background-repeat: repeat' stretch issue

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

Solution

  • 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.