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

css background-repeat
bbedward picture bbedward · May 10, 2013 · Viewed 18.2k times · Source

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

kelly johnson picture kelly johnson · May 10, 2013

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.

Related questions

CSS, background-repeat distance

I want to set a background-image but with an specific distance between the repetitions. For example, I have this image to become a background-image: And I want to fix the repetitions in a pattern like this: Check the JSFiddle playground …

Read More
Why background-repeat: no-repeat doesn't work with .svg images in Opera 12?

I got stuck with a strange problem in Opera 12: I have an .svg image which is linked within my css code. When I resize to zoom-out the page where the image is displayed, Opera repeats the image as if I …

Read More
can you create space between background image repeats?

Is it possible to repeat a background image, but specify a number of pixels before the next repeat starts. i.e. background: url(img.png) [after 40px] repeat-x; I don't want to add empty space to the image.

Read More