http://qwibbledesigns.co.uk/preview/wood/

 

In a resolution of 1024 px and below, the background appears fine, but above that the image dcdoesn'tover it all. As you might know, the background image is a largely used web dev resource, and comes in largeer resolutions. Is it possible to show a background imge depended on a persons resolution?

 

Else, how do you recommend I get round this?

You might be able to do this with javascript, but most designers would use an image that can be repeated horizontally i.e

 

<style type="text/css">
body{background:url(bg.png) top repeat-x fixed;}
</style>

 

Looking at it in my 1280*800 resolution though it looks fine...

You can't stretch a background image but you can stretch a normal image with position: absolute or position: fixed. See

http://www.wickham43.net/backgroundfullwidthflexible.html

and drag the window smaller or larger.

Method 1

 

Change

background : url(../images/1280x1024.jpg) no-repeat fixed;

To

background : url(../images/1280x1024.jpg) repeat-x fixed center 0;

 

It won't stretch it, but it will repeat it to cover the blank area (which I think looks better anyway). Seems to work fine at 1650*1050 if I change to that.

 

Method 2

 

If you prefer it stretched then you have to insert it as a normal image in your HTML. Then style it using CSS using something like:

.bg_image {position:absolute;z-index:-1;top:0px;left:0px;width:100%;height:100%;}

I can't remember the last time I did this, but I'm not sure if you need to set the width and height of "body" to 100% too for it to work...

 

Both methods work, I'd go for the first one (repeating) and there's no need for JavaScript or anything! Just basic CSS and HTML.

Thanks peeps =)

 

I'll play around and see what I like best.