Repeating background

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

I'm looking to do some sort of repeating background on this page, but I'm unsure how to carry it out with all of the curved elements involved.

nstylefx.com

If the site was just straight edges, it would be no problem. (Like getasiteonline.com)

Any advice?

She has: 18 posts

Joined: Feb 2006

There might be other ways to do this, but the way I've gotten around it in the past is to either replace any white areas on the individual images which contain the 'outside' edges with the same colour or pattern of the background.
(An example, in case I've not described it well.)

If the 'white space' is small and you're using a textured background, you might even be able to get away with making the white area a similar colour to the main colour of the background without it being noticable. (I've managed this on a site with basic curves, but it might be tougher with your design.)

DaveyBoy's picture

They have: 453 posts

Joined: Feb 2003

using PNG would work but of course, not on IE haha.

She has: 18 posts

Joined: Feb 2006

DaveyBoy wrote: using PNG would work but of course, not on IE haha.

That is precisely why I avoid transparent images. I'd rather have a page background that is repeatable in such a way that if I use an image within the page I can use the same background for the image and have it be seamless (or near enough for rock and roll.)

DaveyBoy's picture

They have: 453 posts

Joined: Feb 2003

your solution might work if it's a fixed width site, wouldn't work for a relative width one though, would it?

She has: 18 posts

Joined: Feb 2006

DaveyBoy wrote: your solution might work if it's a fixed width site, wouldn't work for a relative width one though, would it?

It depends on what sort of background you're after. The example above was a bad background image to use (it would be a nightmare to try and tile so it didn't *look* tiled).

If you get a background tile with a small or subtle pattern to it, it's fairly easy to blend the images with the background. My site has a very subtle background on it and my corner images are small. It hasn't gone live yet, but I'll post a screenshot.

That's two relative width divs, both using the same background tile, along with the corners for the content div - which were already a similar colour to the new background image and because of the texture effect I didn't need to add the texture to the corner images. They're small enough that unless you look very closely it's not an obvious join with the background. It's do-able, it just depends on the complexity you're after.

demonhale's picture

He has: 3,278 posts

Joined: May 2005

I got small repeating images I custom made, like diagonals etc. that doesnt take the focus away from the site or is too imposing, but gives a textured feel to the BG giving it more oomph...

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.