Scale an image to the browser window
09 Insert image
09 Insert image
Now create an image for the header tag. We have created an image 1000×150 pixels and saved as a PNG. We also cut out a small snippet of the PNG image to be used as a repeating background image. Go to Insert>Image and add to the tag. Now double-click the tag in the CSS panel, add the background image and select repeat-x.
10 Header definition
Adding borders to the header offers more definition and allows quick changes in the future. Double-click the #header tag in the CSS panel, select Border and add a solid one-pixel border to the top and a solid four-pixel border to the bottom. Use colours that compliment the header image.
11 New additions
To compliment the scaling background image and header a couple of extra div tags are going to be added. Head to Insert>Layout Objects>AP Div add, rename and place into the desired position. Set the width for both tags to a desired percentage, around 33%, to help show off the main image. This will also give fluidity to the tags.
12 Finishing touches
To work with the liquid layout and scalable image the image in the main content area is to be scalable as well. Insert the image and set the image height and width to 100%. Be flexible with the dimensions as this will be affected by how much text is in the tag. Finally, style with complementary background colours and borders.
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
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?
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.
Very nice
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.
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.