background-repeat

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 didn't use the "no-repeat" value in background-repeat. What am I missing? Here is my css code: .svgImg { background: url("../img/img.svg") no-repeat; height:100%; width:100%; } I also tried this: .svgImg { background: url("../img/img.svg"); background-repeat:no-repeat; height:100%; width:100%; } But it didn't work. Why opera does that? .svgImg { background: url("../img/img.svg") no-repeat;

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. background-repeat: space; background-repeat: round; // round(520 / 100) = round(5.2) = 5 The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container. Full details here or read Background Size property 来源： https://stackoverflow.com/questions/15199863/can-you-create-space-between-background-image-repeats

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 I'm looking for a CSS3 clean solution, not JS, not extra elements, and so forth. If I have to use very modern CSS3 (un-supported) tricks is ok. I guess the ship has pretty much sailed, but still there is a solution based on data-URI. You can generate an SVG containing your image which has a size greater than the image (e.g. to make the margin 60px just make a