CSS Background Repeat

Question

Lets say I have an image with the width and height of 1700 x 1129px. What is the best way to be able to repeat this image so that you cannot tell that it has been repeated. I have tried using repeat-y but it looks like its another graphic.

enter image description here

How about `background-size: 100% 100%`? It will make the background cover the element completely. — Mr_Green, Mar 29 '13 at 09:26

score 1 · Accepted Answer · answered Mar 29 '13 at 09:20

1

There is nothing to do with css. Your image does not allow repeating. To repeat an image without bad effects your image has to have same start and end in the direction you want it to repeat.

answered Mar 29 '13 at 09:20

Linus Caldwell

10,908
12
46
58

score 0 · Answer 2 · answered Mar 29 '13 at 09:24

0

There's a quite simple trick: end your image sides in a static color (like black or dark brown in your example), center your background image and color fill your background

body { background: black url(image.png) no-repeat center top; }

answered Mar 29 '13 at 09:24

Koen Betsens

88
9

Fabian Lauer · Answer 3 · 2013-03-29T17:28:59.010

0

You will have to make a seamless image, that means that the upper and lower edges as well as the left and right edges of the image match their opposite edge perfectly, so no angles and color transitions being visible. The css approach using background-repeat is totally fine.

That's often used in CG, mostly in the 3D world. There's plenty of tutorials around on making an image seamless, found one here.

edited Mar 29 '13 at 17:28

answered Mar 29 '13 at 09:24

Fabian Lauer

511
2
12

The word is "seamless". As in a "seam", a join in cloth or leather where two things have been stitched together. – AmbroseChapel Mar 29 '13 at 12:14
oh, I'm sorry about that...fixing it – Fabian Lauer Mar 29 '13 at 17:28

score 0 · Answer 4 · answered Mar 29 '13 at 09:29

Use background-size property.

If you have a background which you think can be disguised by repeating horizontally then do the following.

background-size: 50% 100%; background-repeat: repeat-x;

if you think the background can be disguised by repeating vertically then do the following:

background-size: 100% 50%; background-repeat: repeat-y;

CSS Background Repeat

4 Answers4