d4ne d4ne - 1 month ago 5
CSS Question

Background repeat will cause the image to repeat in a weird way

I'm trying to create a body background image which would repeat itself. Sadly the image repeats in a weird way, as you can see on the following site: Link to the background image

My css code looks like the following:

body {
margin: 0px;
width: 100%;
height: 100%;
background-image: url("../img/background.png");
background-repeat: repeat;

What am i doing wrong that the image would repeat in this way:

enter image description here

pol pol

The upper part of the image is different than the bottom.

You should use a very small image and repeat that.
Something like this: http://i.imgur.com/jrgPqrD.png

It might be wiser to use a data/uri, rather than an image, this way you won't have to host it.

Here's an example as per your image:

html {
  height: 100%;
  width: 100%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAADFBMVEUBupkBlHoBlXoClXqzJdbeAAAAIElEQVQI12NgCGVgnsLAmsAg2sBQzcCwhZEhgZPhgBgALyMEVqftfRkAAAAASUVORK5CYII=);