Panoramic Layout - Background Issues Options

[SleepyWoodson]

The Image (under construction)

I've made a large panoramic view of a park. It's about 13,000px in width. The idea was to create a layout where you must scroll vertically and explore the layout. Unfortunately, I'm a novice when it comes to design.

What should I do about the background on MySpace? Should it just be the image set against a black background? Should it be shorter in length? I'm so clueless.

I'm not finished with the design itself, I want to add some animals, foliage, specialty trees and other crap.

I just want some feedback.

[Jghelfi]

you can use PHOTOBUCKET
they can resize, edit photos...
and there is tinypic.com

[Tomates]

I like tinypic.com the best
the only problem i think i have with photobucket is they seem to have "Bandwith Exceeded" too much

tinypic to me in my opinion has that less

[fixtatik]

jeez, 2MB. neither photobucket nor tinypic will be able to handle that. photobucket will stop delivering it after 12 page views.

i strongly suggest trying to compress it more. for hosting it, there's microsoft's skydrive and adrive, which rockguy mentioned in a different thread. i'm not sure what the bandwidth limit on adrive is (or if there even is one), but skydrive isn't metered.

i didn't actually download the file, but what's the height of it? if it's tall enough you shouldn't even have to worry about using a background color (like 1200px). if it's less than 1200px, just use the color that you're using the most in the image. you might even want to blend the edges into that color. so it'll look nicer for people who have gigantic monitors.

[SleepyWoodson]

The Design (under construction)

I'm looking to add more gimmmicky objects.

The image is about 738px in height. Would it be possible for me to create a background image that had 738+ be sky, and 0 and below be dirt? Would I be able to align it so that users with higher resolutions would see the blend?

[fixtatik]

^ definitely. it really just depends on how you want it done, because you're going to run into a couple problems, unfortunately, just because of the way it's designed.

when you're positioning it, instead of doing it from the top, you'll just be doing it from the bottom. what i suggest is that you make another image (you'll be able to get away with it being 1 pixel in height) that fades left to right from the light blue to the dark blue. set that gradient image to be the body background. that way, if you do get visitors with huge screens, the top will look natural. you actually shouldn't even have to worry about the background color, since no one has a monitor bigger than 10750 pixels.

CODE

<style>
body {
  background: url(GRADIENT URL) repeat-y top left;
  overflow-y: hidden;
}
.park {
  background: url(IMAGE URL);
  bottom: 0;
  height: 738px;
  left: 0;
  position: absolute;
  width: 10750px;
}
</style>