background image size

[petalmax]

Using HTML, how can I specify a background image to fit any size monitor/screen, without it tiling? I can use an image editor, photoshop, to resize it. If so, how big should I make it? Or, can I make it stretch somehow using HTML code to fit anybodies screen?

[Excavator]

Hello petalmax,
Have a look at this demo - http://nopeople.com/CSS/background_i...ize/index.html

As long as you're aware that the end user can size his browser so your background image is very skewed out of proportion... if your ok with that, it works.

View the source to see how it works.

[petalmax]

Originally Posted by Excavator

Hello petalmax,
Have a look at this demo - http://nopeople.com/CSS/background_i...ize/index.html

As long as you're aware that the end user can size his browser so your background image is very skewed out of proportion... if your ok with that, it works.

View the source to see how it works.

Hi Excavator, I enjoyed the code for the very large sized background image and will reference it perhaps in other circumstances however for this, the image cannot be skewed.
Looking at it I realize the height can remain and eventually be accessed with a scroll bar when more information is added to the web page. It is the width that I'd like to fit any size monitor screen. After more time with this, unfortunately, I'm still stumped. I've noticed with a body background color set at 100% for width and height, this is not an issue. Thank you and please pass along anymore thoughts here.

[Scriptet]

You cannot currently size a background image at a percentage, say 100% so that it would fit any browser width.
However I believe this is implemented in CSS3, but forget about that for now because it's ages away, plus it would cause problems with image re-sizing.

Your options are to have the background image, as a simple image e.g <img src="blah.jpg" /> and set that to 100% width and position it in a way to act as a background, but this implements extra markup and is not very good design.

Another option is to create the image so that it fades out towards the left and right into a common colour, and make it the size for the biggest resolution. That way small monitors get a nice background and large monitors also. The fading isn't needed but may help.

Check this site for example: http://www.webdesignerwall.com/
Their background image is huge, but on a small 1024x768 monitor you still get a nice looking background that doesn't seem chopped, whilst even bigger monitors are getting even more.

[petalmax]

Originally Posted by Scriptet

You cannot currently size a background image at a percentage, say 100% so that it would fit any browser width.
However I believe this is implemented in CSS3, but forget about that for now because it's ages away, plus it would cause problems with image re-sizing.

Your options are to have the background image, as a simple image e.g <img src="blah.jpg" /> and set that to 100% width and position it in a way to act as a background, but this implements extra markup and is not very good design.

Another option is to create the image so that it fades out towards the left and right into a common colour, and make it the size for the biggest resolution. That way small monitors get a nice background and large monitors also. The fading isn't needed but may help.

Check this site for example: http://www.webdesignerwall.com/
Their background image is huge, but on a small 1024x768 monitor you still get a nice looking background that doesn't seem chopped, whilst even bigger monitors are getting even more.

Hi Scriptet, I like your suggestions and I love the website from the link you provided. I looked all over it to isolate the background image, but with no luck so far. If you know the steps of how this was done could you direct me further? It looks like javascript and css. Perhaps it's this piece of code, http://www.webdesignerwall.com/wp-co...x/thickbox.css, but still can't isolate the background image. Thanks for all the input.