Да кажем, че имам изображение с ширина и височина 1700 x 1129px. Кой е най-добрият начин да можете да повторите това изображение, така че да не можете да разберете, че се е повторило. Опитах да използвам repeat-y, но изглежда, че е друга графика.
Няма нищо общо с css. Вашето изображение не позволява повторение. За да повторите изображение без лоши ефекти, вашето изображение трябва да има еднакви начало и край в посоката, в която искате да се повтаря.
Има доста прост трик: завършете страните на изображението със статичен цвят (като черен или тъмнокафяв във вашия пример), центрирайте фоновото изображение и запълнете фона с цвят
body { background: black url(image.png) no-repeat center top; }
Използвайте свойството background-size.
Ако имате фон, който смятате, че може да бъде прикрит чрез хоризонтално повтаряне, направете следното.
background-size: 50% 100%; background-repeat: repeat-x;
ако смятате, че фонът може да бъде прикрит чрез вертикално повтаряне, направете следното:
background-size: 100% 50%; background-repeat: repeat-y;
Ще трябва да направите безпроблемно изображение, което означава, че горният и долният ръб, както и левият и десният ръб на изображението съвпадат перфектно с срещуположния ръб, така че да не се виждат ъгли и цветови преходи. Подходът на css, използващ background-repeat, е напълно добър.
Това често се използва в CG, най-вече в 3D света. Има много уроци за създаване на безпроблемно изображение, намерихте тук.
background-size: 100% 100%? Това ще накара фона да покрие изцяло елемента. - person Mr_Green schedule 29.03.2013