CSS背景重复-x，strech-y

Question

I have a striped background with a gradient which I want repeated in x and stretched in y. I thought this would work:

background: url(bg.jpg) repeat-x;
background-size: auto 100%;

But it either stretches in y or repeats in x, never both at same time:

http://codepen.io/anon/pen/JCjEb

Edit: Note that I cannot simply repeat in y since the striped background also have a gradient (dark in bottom, lighter at top).

Answer 1

You can just use background: url(bg.jpg) repeat; without background-size. Here is the example .

Answer 2

The problem is that when you set the background-size to auto 100% , it's going to stretch the whole image proportionally, thus making the stripes too wide and distorted. Set the x part of the background-size to the width of the original image, and it won't stretch anymore.

.b {
  background: url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif) repeat;
  background-size: 35px 100%;
}

http://jsfiddle.net/BsAcY/

Answer 3

Instead of giving it width auto , give it the width of the image ( 36px ). http://codepen.io/thgaskell/pen/Bjsix

CSS

.c {
  background-size: 36px 100%;
}

Answer 4

Try background: url(bg.png) center repeat-x;

Not sure about IE8 and below though, if that's a problem.

Answer 5

.a { background: url( http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif ) repeat; display:block; width:500px; }

Is that what you need?

Answer 6

Try this

** HTML **

<div class="b"></div>

** CSS for bg image & gradient **

.b {     /* unprefixed gradient for example only*/
  background: 
  linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%),
  url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif);

  background-repeat:repeat;
}

div {
  height: 300px;
  width: 200px;
  margin-right: 50px;
  border:1px solid grey;
}

Codepen Example