Make a non-repeating image background as a tile

With CSS you can perfectly define how you want the background of your page to behave. Of course you can make the image not repeat itself and occupy the whole page if you wish.

However, you will most likely need a larger image, because 225×225 is very small. If you want the background image to occupy the entire page, you would need a much larger image, so that when resized it doesn’t look too ugly.

If you simply want the image not to be repeated, you can use this CSS:

body { background-image: url(‘css.jpg’); background-repeat: no-repeat; }

But the image will remain at the top and the rest of the page will appear without an image background.

Then you can do something like this to make the background image expand so that it takes up as much space as possible while maintaining the image’s aspect ratio:

body { background-image: url(‘css.jpg’); background-repeat: no-repeat; background-size: cover; }

But if you want it to use all the space on the page you would have to put something like this:

body { background-image: url(‘css.jpg’); background-repeat: no-repeat; background-size: 100% 100%; }

What happens in this last alternative is that the image is going to be deformed, so that it occupies the entire size, stretching without maintaining the proportions.

I assume you know how to use CSS. If not, you can learn in the .