Sorry I couldn't be more explicit in the topic title but I couldn't really think of the correct terminology.

Basically I am wanting to create an effect similar to the menu/navigation bar (at the top) on this example site (there is nothing unique, again I point out it is a really simple question).

Example (http://www.cj-hosting.com/)

As you'll see it has a blue background with buttons and three servers on the side. The blue background is slightly angled/curved.

Is that an image? How do you create that effect?

Another example (http://www.potentproducts.com/)

There are probably many ways to create those effects.

The simplest way is probably to create very large circles and apply masks to them. A mask allows you to specify the area of an image that you'd like to show, and in the case of your examples that area would be small pieces of circles.

What software do you use for visual design? If you're using Fireworks, I'd be happy to create a simple demonstration of the effect you're seeing and send you the source file to dissect.

THR, you're right, the CJ web site is done with simple background images. The overall header image is actually spliced into 4 different sections. Each section is used as the background of a cell in a table.

One of the easiest ways to do an image like this is to create the overall image in a graphics program. Then, splice the image into smaller, logical sections.

For example, you might have part of an image that you can simply tile instead of placing a huge 600px wide graphic. Or, part of a solid colour might be replaced by using a blank cell or div with that actual background colour.

This has 2 major advantages. One being faster downloads (yes, some people are still on dial-up :)). The other being the ability to create a more fluid design.

You can use either tables of CSS to 'join' your spliced image back together.

Thanks guys :)

I know it seems simple but I am relatively new to web design.

I do use fireworks the_pm .. if you don't mind doing a simple demo, I would really appreciate it!

Here's a really simply demo. This took about two minutes to create. This is the source file, so if you save it to your computer and open it in Fireworks, you'll get layers.

A word of warning: do not use this file for anything other than to study the technique! The last thing I want is to be responsible for someone being ripped (though this is a loose rip, it's too close for comfort). Thanks!

Thanks :)

Will look at it at home tonight.

My next question is how does this work if someone uses a different resolution and has a different size monitor? Will it always cover the full width of the screen or will it cover less or will it mean that the horizontal scroll bars show (i.e. goes beyond the width of the screen)?

That has to do with coding and how you strategically crop and export your image. In this case, you would find the point where the pattern repeats itself horizontally, shave it down to 1 px wide, and tile it horizontally across the top of the screen. This would make it appear to expand and contract with the screen.

Aah, ok. It all just makes sense.

Thanks trillions!

Sure thing :)

Good luck with making it happen. If you need an example of what I was saying, I'll be happy to code one up for you.

Hmm, if it wouldn't be imposing. I gave it a show ... but I'm not that flash with Fireworks.

Here ya go :)

http://www.plhmedia.com/THR/

This is an overly simplified example, obviously, but it's just for study.