1

Let's say I had a website with a relatively fixed Primary Content Area width and a picture background. When filling up the browser window, it looked like the following:

enter image description here

When viewed, however, on a larger display, it looked like the following:

enter image description here

I don't wish the whitespace (or solid of any color) on both sides of the image.

Since the background image is a non-repeating image, I can't simple repeat it over the extra space on each side.

Making the image fill the entire windowing and shrinking it if the user makes the window smaller causes problems since either it needs to get distorted (same height but different width), or if ratio is maintained, it is not high enough to fill page.

Maybe make the image fit the screen when fully open, and when made more narrow, crop the image? Don't know if this is possible with older browsers, but that is a question for a different forum.

Any other thoughts?

|improve this question
  • 2
    I'm voting to close this question as off-topic because it is more about graphic design and implementation than it is about UX. – DA01 Jul 23 '15 at 15:32
  • Comments are not for extended discussion; this conversation has been moved to chat. – Benny Skogberg Jul 24 '15 at 6:58
  • use an encapsulating <figure> tag and 'overflow:hidden' on the img to not stretch the img and maintain its ratio. – RobSeg Jul 28 '15 at 10:26
1

What could work is a blurred out version of the same background:

Blurred image

Just make sure to blur it enough to not draw attention away from rest of the page.

|improve this answer
  • Good suggestion. Don't know if it always would be best, but will likely do so sometimes. – user1032531 Jul 31 '15 at 18:35

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