Background Repeat Gives Big Visuals Without Load Lag

Sometimes you want to give your site more visual pop, but don't want art to add to the load time of your site. Images have a lot of information and can cause impatient viewers to bounce before they load. Recently I was reviewing my site in order to change the look a bit.

It was okay, but I knew it could be better. I decided that I wanted a linen look to the background...something that would further the theme of a deskpad or wallboard. I found a nice jpeg, used the slice tool and saved a slice that was 16 by 800 pixels. Then added it to css under body.





body {background-image: url(../images/Linen_05a.png); background-repeat:repeat-x;}



Since the slice was long and thin, I had it repeat horizontally. If your slice is wide and short have it repeat vertically by using "repeat y" in the command. If you are dealing with an image that is short and thin, you would repeat both x and y by just using the command "repeat".



With minimal effort and no load drag, the site went from ordinary to interesting.

You can find pictures of textures that lend themselves to slicing and experiment on your own site. It gives a little extra flair to the look, and is easy to remove if you don't feel it works.

Slideshow