Home › Forums › Webmastery › HTML and CSS ›

Creating A Background

Barry_G's picture
Submitted by Barry_G on Sat, 07/12/2008 - 17:23.

Hi

When I set up a page in Dreamweaver CS3, I create a container div to hold all my other page areas(divs).

I set left and right margins for the container to auto so my page is centered in the browser.

I then choose a background color for the container, usually white, to set it up for text.

I go to "page properties" to set a background color for the rest of the unused portion of the page that's visible outside my container.

This may not be the correct way, but it seems to work fine and be compatible with all or most browsers and devices.

QUESTION - Instead of setting a background color for the part of the page outside my container, I was thinking about using a background image, pattern background, or gradient background, all of which I would use photoshop to create.

If I set the page property to REPEAT this chosen background, what is the optimal size to make the image, pattern, or gradient I use so it displays and functions properly as the background?

Does this make sense? I mean if my content page is 950px wide, I would need a background 950px wide, that's a no brainer(I think).

But if using an image, pattern or gradient as the background to be displayed outside my content area, I would assume some issues beyond my control, such as viewer browser size come into play.

Thanks in advance

Barry

‹ Designing For Devices Need Advise with Fireworks ›

What does your background

kensav's picture
Submitted by kensav on Sat, 07/12/2008 - 18:17.

What does your background look like now. All you need to repeat height and width is the smallest image possible that contains all the image feature you want to show. If it's a gradient background, I make mine a few pixles wide and as tall as I want the gradient to stretch. Then usually repeat-x.

I guess if you could show the graphic your looking to make your background it would help.

-Ken

got twitter?
www.twitter.com/kensavage

Hi Ken Thanks for the quick

Barry_G's picture
Submitted by Barry_G on Sat, 07/12/2008 - 19:10.

Hi Ken

Thanks for the quick reply.

I really haven't decided on the exact background yet. Most likely a red white and blue gradient.

Red at the top, white in the middle and blue towards the bottom.

If I use a gradient background, I want to be assured it will go as wide as necessary to look good no matter what size or resolution browser the viewer has.

I realize that if I optimize my page for 1024px wide, a viewer with their resolution set to 800px won't even see the background, and that doesn't bother me.

I guess I need to experiment a bit, especially if your suggesting only a few px wide...would have gone much wider than that, not really knowing any better.

Thanks in advance.

Barry

use of a background image

webclay's picture
Submitted by webclay on Sat, 07/12/2008 - 20:33.

Hey Barry

I usually use a 10px*1200 background image to make sure it looks fine until above the 1200 resolution (24" above). Using this CSS you're almost on the save side ;)

Long CSS version
background-color: #fff;
background-image: url(../images/bg_body.gif);
background-repeat: repeat-x;

Short CSS version
background: #fff url(../images/bg_body.gif) repeat-x top;

Hope this helps.

Hey thanks Webclay! Time to

Barry_G's picture
Submitted by Barry_G on Sat, 07/12/2008 - 23:30.

Hey thanks Webclay!

Time to experiment a bit I guess.

I would never have tried such a small width without asking for a bit of help.

Barry

Syndicate content