backgrounds: one size fits all

Here is what to do if you want to have a background image that will automatically re-size itself according to the browser windows size (thus also for different screen resolutions).

First off be sure to get a nice large image around 16:9 ratio size having preferably 1900 px width, reduce its size (not in pixels, as in kbs) so it is not larger than 300-450 kbs(even this is too large but it will do).

Then upload it to someplace where you can have a direct link to it.

Finally go into "Edit HTML" from the design tab. Find "body {" in the css section. (just searching that quote without the quotes will get you there if you can't see it). It will most likely look something like this:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Now, replace this part;
background: $(body.background);
with this;
background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
You should have something like this as the final result;
body {
  font: $(body.font);
  color: $(body.text.color);
  background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

This will work in most of the latest versions of known browsers.

.................................................................................................................................

can you resize a full background image on an HTML/CSS website?...

... one of my students wanted to know last week. Well, seems that you can:

http://css-tricks.com/how-to-resizeable-background-image/

And you can see a demo of it in action here:

http://css-tricks.com/examples/ImageToBackgroundImage/

Apparently this works with just a few lines of code which you insert directly into the CSS:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Very very nice indeed! Lots and lots of other really cool code snippets (as they call them over there) to check out on their huge site. So, thank you Chris Coyier and CSS-Tricks!

 Note:  I have been thinking, and in order for this to give a good result your image aspect ratio would need to be 4 x 3 so that it reaches down effectively at sizes like 1024 x 768 or 1600 x 1200. However the width would need still need to be 1920 so that it also stretches to 1920 x 1080. Which makes the vertical value 1440. So, 1920 x 1440 is what you need. Which is pretty big and may be difficult to bring down to 300KB, which is the limit on blogspot background images. Read more on browser sizes and background images here  ) 

................................................................................................................................

starting out with some design stuff now :-): background images and screen sizes

OK! Almost ready for some design fun! 

I figured that it might be nice to let you guyz start out with something that should be quite enjoyable - adding a background to your site. But before we get there, I would still like to remind you of something which is actually quite obvious: Not everyone has the same computer set-up and so everyone sees things differently, depending upon how large their screen is. There is a top left bias in all of this, which means that everyone, always, sees the top left corner of the browser. All else that people see varies from resolution to resolution.

The screenshot above shows you how this site is seen at a 1024x768 screen resolution. As the site's content slides left, one of my pixelmen is actually placing himself very nicely behind the header, so I am quite pleased about that. True, folk can no longer see the big pink fellow to the right but since the image that I have is more like an abstract backdrop I can live with that.

 (Tip:  A very nice freeware application that lets you test out screen sizes is Sizer (PC only). I would advise you to make use of it and often check to see how your site looks to others.  ) 

The widest screen resolution which we need to take into account is 1920x1080 or if we think lengthwise 1600x1200. However, this is not as wide or as high as it gets, Wikipedia gives a very nice list going all the way from the smallest to the largest sizes.

Some older websites are designed flush left, but nowadays for the largest part we tend to favor a centered layout. As the screen gets smaller all content will slide to the left of the screen.

 Upshot:  Your background image needs to take all of this into account. It is of no use whatsoever having a gorgeous image where the main elements are on the bottom right since there is no way that someone with a 1024 x 768 display setting is going to be able to see the stuff. It is equally bad to have full background images that are smaller than 1920 x 1200 (1920x1080 - 1600x1200) since anything smaller will result in really nasty patches when viewed on a large screen. So, unless you are tiling a small image (more on this later), always make sure that your full screen background image is larger than 1920x1200 and that the nice parts of the image are located towards the top and left. That way everyone, small and large, will be equally happy!  :-) 

 Update:  While all info above is still valid for most purposes, there is also an update on making resizeable full background images, which you can read here:
http://easypeasydesign.blogspot.com/2011/03/can-you-resize-background-image-on-non.html

................................................................................................................................