News

Scale an image to the browser window

Final

We show you how to combine absolute positioned Div tags with a scalable image as a background for all screen resolutions

Background images have become a constituent component of the webpage building process. However, they are limited in their approach and users can only display a single instance or repeat across a single tag. Taking an image away from its background status allows designers to scale an image to fit a browser window whatever its size. The procedure for creating a scaling image is relatively simple, but it brings with it other issues. The image is not placed in the background but is inserted directly into the tag. Consequently, web designers will not be able to place or position standard div tags over the image.
The workaround for this is to call AP div tags into action. These can be positioned wherever a designer wishes, effectively making the scaling image a background image. Here we show how to create the scaling image, add AP div tags and give them liquid dimensions.

This tutorial originally appeared in Web Designer issue 162, authored by Steve Jenkins

01 Choose an image

scale01

The first and perhaps most important step is choosing the right image. The image composition must be relatively uncomplicated to make sure it does not distract users from the page content. The dimensions need to be relatively large, eg 1400×1000 pixels and demonstrate the approximate proportions of a computer screen.

02 Image preparation

scale02

Open the selected image in an image editor and crop the image to include/exclude the desired elements. Now resize (Image>Image Size) the image making the width around 1500 pixels wide while keeping the aspect ratio. Finally, go to File>Save for Web & Devices and reduce the file size, ie JPEG at 50 per cent, as much as possible.

03 Create #imagewrapper

scale03

Create a new HTML page (File>New>HTML>None>
Create) and head to Modify>Page Properties and set all margins to zero. Add a new div tag called #imagewrapper (Insert>Layout Objects>Div Tag>New CSS Rule). Choose the ID Selector Type, add the name and press OK, select Box and set Height and Width to 100% and click OK.

04 Insert image

scale04

First delete the Content for id “imagewrapper” Goes Here text inside the div tag. Now head to the Insert menu and select Image, locate the image and add to the #image wrapper tag. Now save the page. Select the image and set the Width and Height in Properties to 100% and save. Now press F12 to preview in the default browser.

×