I’m building the mobile version of a website using the jQuery mobile toolkit.
The pages will have a vertical layout (vertical only scrolling).
I want to show a background image on the main page, even when the user scrolls to the bottom.
The image is a big image, to be shown in no-repeat mode. The image must show it’s top left corner in the top left corner of the page, and show as much as possible of it’s width and height (the image should be resized so as not to be – or to be minimally – cropped).
Is it possible to deliver an image for any (or all) different screen sizes and aspects?
You could use the
widthandheightCSS media queries to deliver different background images based on the width and height of the user’s viewport.And if you set the background image on the
<body>element, and set itsbackground-attachmentproperty tofixed, then the background image will stay in the same position relative to the viewport even when the user scrolls the page.