Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote -1 down vote favorite

I want to develop a webpage. The dimensions of psd that is provided is 1980 x 1280 px. There are lot of background images in it. I have to develop a stretchable design with no scroll. How I can make a such layout that can be fit on every resolution?

And the background images are also the problem. Which dimensions I use to slice the images. If the image is 100 x 100 in 1920 x 1280 psd. Then How I can make a sprite for all images?

share|improve this question
1  
Your never get the design looking the same on all resolutions, since different resolutions have different aspect ratios i.e 16:10, 16:9 4:3 10:2 etc. So if you want exactly the same you can't have it full screen at 1920px as it won't fit approx on 1024x768px. this is why many sites use 960px, but don't get me wrong it could be possible if you resize everything using media queries but it simply won't be exact like for like. :P – bybe♦ Feb 15 at 6:54
This belongs on Stack Overflow but because they would consider it too broad and close it I will just close it here as off topic. – John Conde♦ Feb 17 at 3:44

closed as off topic by Su', John Conde♦ Feb 17 at 3:43

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

1 Answer

up vote 0 down vote

I wouldn't make a sprite for background images, that's a world of pain. Why not just define a large background image via CSS, set it as static, vertical align to top, horizontally align to centre and allow it to clip past the window border? Then when a user resizes their browser window you'll always see the key parts of the image.

You'll have to remember the various 'important' resolutions to design at, and work around that. If you start slicing and moving in proportion with screen width, you're going to have a massive amount of Javascript and CSS work for the browser to do even before the page has rendered.

If you really want to make a 'stretchy' design, DIVs with percentage alignments are the way to go. Some advanced usage of CSS @media types will probably come in useful too so you can load a different set of image slices and have them move by different amounts depending on the initial resolution of the device; this is Responsive Design.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.