Different screen sizes: SUP background image

[Former Member]

Hello,

we are using SUP version 2.1.3. In our company we have different devices with different screen sizes / aspect ratios (4:3, 16:9). iPhones, iPads, Samsung Android mobile phones, Samsung Galaxy Tab 10.1 and we are creating lightweight applications.

What is the best practice to handle those different screen sizes and provide the right background image for the devices? Small images for phones, big images for tablets?

We don't want a repeating image, we want the image displaying with the full height and width of the device. And this not on all screens, primary on the start screen.

What is the best way to solve this? Some CSS with media querys for screen sizes? Custom.js?

[former_member184221]

I would use SVG - Scalable Vector Graphics for your images.

See Keeith Wood Svg Web Page  for a jQuery plugin.

[Former Member]

Hello David. A SVG file won't be appropriate for our needs. We have background images with company logos and pictures of people or press images from other companys. So we use jpg or png.

So the question is should I resize those pictures and embed them with CSS or in the Custom.js <- best practice for that? Because we only want the picture on some screens - not on every screen.

[former_member184221]

OK, I had to ask my Son, Simon Clavey on this one because he is frontend UX designer par excellence.

And his advice was to create a company logo using SVG, however failing that you should use a PMG which is at least two times the delivered ratio (e.g. 2 x size of screen). If you can keep the main background as a solid colour and place the "resized by CSS" company logo upon it.

Best practice for delivering solid colour back images in CSS :

background: url(../img/bg2.png) no-repeat center center fixed;  
background-size: cover;