Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
9th April 2010

Scale an image to the browser window

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

Scale an image to the browser window

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

Scale an image to the browser window

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

Scale an image to the browser window

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

Scale an image to the browser window

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

Scale an image to the browser window

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.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.webdesign-gm.co.uk Adam Web Design

      Great blog! Very clear and easy to understand. I’ve always wondered what size the image should be in the first instance, surely with all the new 27″ monitors a 1000px wide image would look a bit pixelised?

    • Dipo

      Hi.

      I was wondering if you knew how to scale the pictures if you are doing it on FLASH.

      I am creating a flash based website for a friend. I have done all the links and it works great. The only thing is that the images increase as the web browser is maximised.

      I would like it to decrease as the web browser is decreased, but to increase to a certain size 900 x 651, and stay that size no matter how big the browser is increased by.

      Would you be able to help?

      Thanks,

      Dipo.

    • http://www.conceitodigital.com Paulo

      Very nice

    • Mark

      I was searching for a good long while trying to get my head around how to do this. to many people online were giving long explanations using code only to get around it and typing out the whole thing. This on the other hand is the best thing I came across. Not only is it easy to understand its a hell of a lot quicker than typing out streams of code.

    • blake

      I followed this to a “T”. Nothing. Did not work. What am I doing wrong? If you had more screen shots, I’d think it’d work.

    • Pingback: Webbrowser scaling | Yourtravelpass

    • lou

      This was easy to follow until it displays a load of wording on my website, i have managed to create this image that fits to every browser in photoshop but cannot set as background in dreamweaver