CODEWITHSUNDEEP
css
pr0b
pr0b

Reputation: 377

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

Upvotes: 0

Views: 179

Answers (1)

pol
pol

Reputation: 2701

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

You should use a very small image and repeat that.
Something like this: https://i.sstatic.net/YRrIb.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: Demo on jsfiddle

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

Upvotes: 1

Related Questions