backgrounds

off.the.walls · 22-09-2012 2:13pm #1

While making backgrounds in photoshop n such for web, what size should i be setting them around to fill the entire screen?

Feathers · 22-09-2012 2:43pm

off.the.walls wrote: »

While making backgrounds in photoshop n such for web, what size should i be setting them around to fill the entire screen?

It depends on people's resolution that they're using & the type of image you're using. With faster speeds now, people sometimes have a slightly larger filesize for a good quality photo & can stretch it to fit using JavaScript.

If it's not a photo but a pattern, people often just make the image larger enough to 'tile' — repeating across or down the page. E.g. If you want a gradient background you can have an image that's just 1px wide & tile it across the page — it makes for a very quick load time as the image will only be a few KB.

Apart from either of the above, it's hard to make an image fill the entire screen, as you can't tell what size people have their resolution set to — this is getting more true with people on mobile, tablet & a range of monitor size/quality than ever before. Another option would be to use CSS3 media queries to serve different images to different sizded screens.

Depends on your target audience & how much effort you want to put in

tatrman · 22-09-2012 8:24pm

off.the.walls wrote: »

While making backgrounds in photoshop n such for web, what size should i be setting them around to fill the entire screen?

you can always stretch the background. Be aware that it can look significantly different with different screen proportion.

off.the.walls · 22-09-2012 8:35pm

http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

Feathers · 22-09-2012 8:45pm

off.the.walls wrote: »

http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

In their case, badly — it's a linear gradient (so exactly the same on any vertical slice) — they have it as an image 247px wide x 1659px high.

Since it's the same all the way along, they could have it as an image 1px wide. Also, after around 600px from the top, the rest of the image is a solid colour — at this point they should crop the image & just specify a CSS background colour on the <body> element.

So it could be 1x600px image rather than 247x1659px image. Your CSS would then be roughly:

body {
    background: url("path-to-image.jpg") repeat-x #333;
}

Repeat-x gets it to tile from left to right, the "#333" specifies a shade of grey for the background when the image 'runs out' after 600px.

tatrman · 22-09-2012 8:46pm

off.the.walls wrote: »

http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

you can have multiple images in background and position them relative to container.

Feathers · 22-09-2012 8:54pm

off.the.walls wrote: »

http://www.creativedigitalmedia.ie/ just an example how would this background be done with the images on it?

Sorry, missed where you said "with the images on it" — what images do you mean? From what I can see, every image seems to be related to a 'foreground' element, apart from the grey gradient.

off.the.walls · 23-09-2012 12:10am

Feathers wrote: »

Sorry, missed where you said "with the images on it" — what images do you mean? From what I can see, every image seems to be related to a 'foreground' element, apart from the grey gradient.

see the way the lines in the background blend in as part of the background?

23-09-2012 10:02am

Here's a link to that image: http://www.creativedigitalmedia.ie/wp-content/themes/creativedigitalmedia_2/images/home_bg.gif (right-click on the section and choose "View Background Image"). They use a transparent image.

tricky D · 25-09-2012 6:37pm

Feathers wrote: »

Since it's the same all the way along, they could have it as an image 1px wide. Also, after around 600px from the top, the rest of the image is a solid colour — at this point they should crop the image & just specify a CSS background colour on the <body> element.

A few things to be cautious about wrt 1px bg images:

There has been in the past problems using them due to rounding error bugs resulting in messed up displays. Not sure how relevant it is these days.
Some devices with low processing power perform badly when having to redraw the image so many times. This mainly applies to 1x1px bgs as opposed to single px lines.
On a practical level, it's easier to see what's going on with the background if there's a bit of width.

Due to the above, I'd advise using bg images with at least 10px on one dimension.

Feathers · 25-09-2012 10:58pm

tricky D wrote: »

A few things to be cautious about wrt 1px bg images:
There has been in the past problems using them due to rounding error bugs resulting in messed up displays. Not sure how relevant it is these days.

Some devices with low processing power perform badly when having to redraw the image so many times. This mainly applies to 1x1px bgs as opposed to single px lines.

On a practical level, it's easier to see what's going on with the background if there's a bit of width.

Due to the above, I'd advise using bg images with at least 10px on one dimension.

Hmm, never had issues with 1px width images, but haven't used 1x1 alright (as that'd just be a solid colour, so I'd just use CSS

). Normally would be gradients of e.g. 200px x 1px.

I agree that bandwidth is fairly cheap these days comparitively, though if you're a JS heavy page, the last thing you want to do is slow it down with unnecessarily large images & every little helps. All the more for mobile now too.

backgrounds

Comments