Hello.

After getting great advice on positioning, I've edited my code and it's looking more stable.

Now I need a little assistance with background image placement.

Please click on this link: www.ibtestsite.info

I've colored the background black and added a background image which is the blue rectangular image that stretches the height of the screen (well at least in Firefox it does). My goal is to have a centered page with no scroll bar for up and down movement or left and right.

I've played around with body {....background-position: "whatever" px;} and it's not doing anything.

Any advice on how to do this?

Even though I'm new...my problem isn't with positioning...(anymore)

My problem is knowing how to properly display a background or how to display a background image that I've designed in Photoshop. This is where advice would greatly help.

I just experimented with resizing everything.

I got rid of all of my images and text and had just the blue rectangular background. And I tried resizing by hitting Ctrl +... and nothing happened. I'm thinking that this is what's effecting my entire design - the unflexibility of my background.

Basically....how do you design a background graphic in photoshop and display it properly as a background in CSS so resizing won't be a problem?

You use the background property on the div or body, however, the graphic is NOT going to resize at all, that's not what CSS does. Positioning a background is done with the top, bottom, left, right values.

The position:relative on every div is NOT necessary, nor is it recommended. Use it on your main container div but that's it unless you specifically need positioning.

Originally Posted by LadynRed

You use the background property on the div or body, however, the graphic is NOT going to resize at all, that's not what CSS does. Positioning a background is done with the top, bottom, left, right values.

The position:relative on every div is NOT necessary, nor is it recommended. Use it on your main container div but that's it unless you specifically need positioning.

Thanks for the advice and happy holidays.

So if you're saying that a background image that is designed in Photoshop isn't going to resize then it wouldn't be wise to have a background designed in Photoshop.

How is this guy (http://portfolio.dreamshock.com/grimshaws/) getting his background's displayed/positioned properly or designed without using Photoshop? His background is resizing nicely with all of his text and images resizing proportionately as well.

A background image isn't going to resize...period. You can use Photoshop, Paint Shop, GIMP, or Bob's Quicky Graphics Editor. It really doesn't matter. Background images don't resize...period. They may TILE (repeat), but they don't SCALE (resize).

If you want an example of how a background can tile and expand, look at my blog. The blue gradient background for the header is designed to expand between two widths in most browsers (IE6 and earlier, it expands to a percentage width). It's done using a 1-pixel wide graphic that I use repeat-x to tile horizontally (to contrast, repeat-y tiles vertically...see my CSS sheet for more info.)

Here's a rough idea of what you want for output code (play with this...it's only meant to get you started):

http://www.christopherjason.com/arti...er-layout-css/

This will get you sorted out horizontally. As far as a vertical scrollbar is concerned, don't bother to waste your time trying. If you build your site properly, you'll have plain-text content, which is resizable in most browsers regardless of font size. So this isn't even a goal worth trying to achieve...the only way it's even remotely possible is if your page contains nothing but images and/or has a fixed height (which usually ends up becoming a bad design.)

What the guy is doing in the example you quoted may "work", but it's a coding nightmare and has a horizontal scrollbar in IE7. So I wouldn't use his example.