Background Image dimensions

[beeldspraak]

Hi everyone and hopefully a happy new year to you all. I have a nagging infuriating problem that I can not resolve. I have not found a single book or web reference that addresses this issue so I am posting it here. Hope someone can clear up weeks of hair pulling.

I want to place a background image (created in PS CS3) into the Body element. Now, I tried chris’s code where a background image will resize automatically to fit different users’ web browsers but this did not work for me (I will try solving that issue another time). What I really need to understand is what measurements to use as a rule of thumb for a background image, how to set its width and height correctly either in photoshop or in the css itself, whichever is preferrable.

For eample if I have background-image: { url(images/pppp.png) width: 100%} does not work. All I need to understand is how best to set background images so that they fit the majority of screens without scroll bars, or will stretch a little bit to acommodate slightly larger browsers.

I really have found no references for HOW to properly deal with this issue in any book that I have sourced both in my library and in book shops where I sometimes sneak in to read. Everyone deals with the code but not with the practical issue of placing. Yes by the way I am new to css, about three months into it, everything goes fine, but this one issue has me in turmoil. Even on the web I have not been able to find anything that addresses the situation of HOW exactly one best deals with placing backgound images for suitability for the majority of browser windows.

Thankyou.
Chris

[beeldspraak]

Thankyou for your help. Unfortunately this site totally confuses me as to its purpose, simply don’t get it. Besides, it does not address the issue of background images filling the browser without scroll bars and being flexible etc. But thanks for the offer.

[JaredAM]

There really isn’t a rule of thumb for your issue. It’s all personal preference.

Users all have different sizes that they prefer while browsing. It used to be that everybody designed for 800px, now it’s 960. But some people browse bigger than that. There is no set size.

However, you could:

a) create a background gradient that you repeat vertically or horizontally

b) create a HUGE background image (1200+ and aligned to the left) with overflow set to hidden.

c) create a fixed width content area (960px) that has your background image and then have a solid color/other image/gradient for the body.

[kobylecki]

Maybe better solution is to create new tag for this, for example:

Code:

…

This solution might be flatten (height isn’t correctly calculate) but I think this is some way to go.

[beeldspraak]

Ok, thankyou, I will try a few suggestions here, and will get back to you each one who has answered. Give me a few hours, thanks.

[beeldspraak]

Hi, guys, well I’m back. I tried very briefly a couple of your suggestions, but it was getting me no where. Though i will try these things out on a fresh document soon. It’s just that I am dealing with transparency as well and have had to set one layer of my image in the html element and the other in the body element otherwise I will not get the transparent effect.

thankyou for your suggestions, I have at least copied your answers over to my machine for future reference.

[jacksmith]

I wonder why these answers haven’t solved your problem yet.I think your question needs some expert advices.

[beeldspraak]

I am going to try them out soon, things a little complicated at the moment. Need to solve another issue first. Happy new year.

[Author]

Posts