I have created a flexible web template using div tags. This is very basic layout. Header,menubar, sidebar ,content, and footer. I am having a problem with images in the flexible content area. If I resize the page the image does not resize. I have placed the image inside a div tag but it is not flexible like the content div tag. I want to be able to resize the page and have the images resize as I drag the page over. Any ideas on this ?
Really can't do this easily. See there are 2 types of images, vector and raster. Basically the difference is as simple as Illustrator vs Photoshop. All images displayed via a web browser are rasterized images. This means that they have a defined pixel size. Thus if you make them larger than that size, they get blurry. However, the trick that many websites use through JQuery functionality is to make large images and scale them down. The downside to that approach though is that regardless of the end users screen resolution, every user must download the large-sized image.
The simplest way to fill a liquid division is to make a small image tile and repeat it in background with CSS code:
background: url (my-bg-img.jpg) repeat;
More on backgrounds: