big background - what size

Placebo

I have a background for a website [not my idea]
just wondering what dimension should i set it to and tile the rest?

background is a picture not tile able image

tricky D

I reckon it kinda depends on how much content lies over it top height-wise.

cormee

You could use JavaScript to resize it dynamically to suit the screen size.

tomED

cormee wrote: »

You could use JavaScript to resize it dynamically to suit the screen size.

Oh god please don't resize an image like this - unless of course it's a vector.

Personally, I'd take the largest screen resolution I'd expect for my target audience and create it in such a way that it could fade out or tile gracefully.

In terms of resolution to target, a lot depends on the image you plan to use. If removing elements of it, reduces the impact - decide on the resolution you are targeting based on this.

For example, if you want people in 800x600 to get the message from the image, make sure the key elements are visible, but of course allow people with higher resolutions see more.

daymobrew

cormee wrote: »

You could use JavaScript to resize it dynamically to suit the screen size.

There is a jQuery plugin for that, I found it mentioned on A Nu N beauty salon. The normal background is quite large already so there isn't much distortion when expanded.

tomED

daymobrew wrote: »

There is a jQuery plugin for that, I found it mentioned on A Nu N beauty salon. The normal background is quite large already so there isn't much distortion when expanded.

What resolution are you on? For me it's terrible - I'm on 1920.

daymobrew

tomED wrote: »

What resolution are you on? For me it's terrible - I'm on 1920.

I am on 1440x900.

cormee

tomED wrote: »

Oh god please don't resize an image like this - unless of course it's a vector.

Fair enough, I can see why you're saying this, it can look pretty ugly depending on the amount of detail in the image and amount of resizing.

You could also resize it server-side using php and GD or Imagemagick so there is no quality loss.

cormee

tomED wrote: »

What resolution are you on? For me it's terrible - I'm on 1920.

It looks to me like the original it's resizing is too small for higher resolutions. When it scales up it loses quality but when it's reduced to about 1024 it looks fine.

tomED

cormee wrote: »

It looks to me like the original it's resizing is too small for higher resolutions. When it scales up it loses quality but when it's reduced to about 1024 it looks fine.

Yep - which is why I'd always steer clear of resizing images and focus on making the image degrade gracefully.

The PHP resize is an opion of course - but ideally it should be cached rather than having to regenerating it each time the page is viewed.

But again, that will only be a stop gap solution. You are still assuming people will be within a certain resolution - so at a certain point, the quality will start to degrade again.

strandroad

If you can expect your audience to be reasonably modern in their browser choice, there's a CSS3 solution for that:
http://css-tricks.com/perfect-full-page-background-image/

tomED

mhge wrote: »

If you can expect your audience to be reasonably modern in their browser choice, there's a CSS3 solution for that:
http://css-tricks.com/perfect-full-page-background-image/

IE8 is a modern browser and this won't work in it. As far as I know IE9 won't use webkit either. So this isn't really a solution.

Either way, it doesn't do much different than Cormee's daymobrew's javascript suggestion.

So, if you were going to use one of those solutions, your best bet is Cormee's daymobrew's suggestion.