This past week I have been fiddling around with my background for my website, and I was having trouble because I wanted a background with lots of character, something that pops, because I knew I was going to put a black(ish) center column for my text and content. It was hard because I didn’t want to find a picture I liked and have to deal with stretching or repeating the image. I wanted the images to be repeating like a pattern rather than a photo.
I love cats so I took several photos of cats from the internet and resized them so that they were good sizes relative to each other. (So that i wouldn’t have a situation with a kitten whose head is larger than entire adult cat) After that I had 7 or so images on 7 tabs in Photoshop. I opened a new photoshop tab, made the “Canvas size” (Image > Canvas size) a size I knew would be big enough to fit 7 cats (I chose 13 inches x 13 inches). Then I lassoed each cat and pasted it onto the new canvas. Once there each cat became a new layer. This made moving the layers around very easy, just right clicking the image and clicking the layer title. After I had arranged the cats how I wanted them, tightly packed with a little white space surrounding it, I trimmed the photo (Image > Trim) and I had the picture I wanted for my background.
I went into Dreamweaver and added this to my CSS:
This is how I made a repeating kitty background!