PHP is a server side scripting language which is very powerful for creation of dynamic web pages. Today you will learn a very useful technique to produce a CSS frame by using three small pieces of a complete frame and joined them dynamically in a changeable width and fixed height. By using this technique you have two main advantages:

  1. Three small pieces of image will reduce the load time of background image, hence your web page.
  2. CSS Frame keeps its shape, beauty and sharpness  width its dynamic background image Width.

Basic Structure of Dynamic CSS Frame Example

You need a source frame image opened in Adobe Illustrator or Adobe Photoshop. for example a sample image is given below:

CSS frame-tipsmoon
Now you need to have three pieces of this frame image. These pieces should be in .png format. Left piece of frame image named 1.png, center piece of frame image named 2.png and right piece of frame image named 3.png. These images are described in detail as given below.

1- Left image of the CSS frame (1.png)

This image is starting image at the left corner of the frame. This image comes only once and will not repeat multiple times. See below image:

2- Center image of the CSS frame (2.png)

This is center image in the main body of CSS frame. it is will repeat according to the width of the frame defined in width variable of the PHP code. this image will look like this:


3- Right Image of the CSS Frame (3.png)

This is right corner of the frame and also closing of the frame. see image below:

A piece of PHP code which will dynamically join these three abstract pieces and make a frame which has a fixed height but auto adjust its shape according to the width which you have given in width variable within the code.
Now Open your Dreamweaver program or any webpage editor you like. Create a file name frame.php and put following code in it.

//*******************set veriables to makeframe
//Total/main Frame width
//left side
//rigt side
//*************************End of Variables
<!--Main Wrapper of the Frame -->
<div style=" height:<?php echo $frameheight."px";?>; position:relative; overflow:hidden; width:<?php echo $framewidth."px";?>;">
<!--left side -->
<div style="
height:<?php echo $frameheight."px";?>;
width:<?php echo $left_width."px";?>;
background:url(<?php echo $left_frame_path;?>) no-repeat;">
<!--centre  -->
<div style="position:relative; 
left:<?php echo ($left_width-1)."px";//-1 is for solidily joint for left and centre division?>;
top:-<?php echo $frameheight."px";?>;
width:<?php echo ($framewidth-($left_width+$right_width-1)."px");//-1 is for adjusting upper -1?>; 
height:<?php echo $frameheight."px";?>;
background:url(<?php echo $centre_frame_path;?>) ;">
<!--right side -->
<div style="position:relative; 
top:-<?php echo (($frameheight*2)."px");?>;
left:<?php echo ($framewidth-($right_width)."px");?>;
height:<?php echo $frameheight."px";?>;
width:<?php echo $right_width."px";?>;
background:url(<?php echo $right_frame_path;?>) no-repeat;">

Final product will look like this as shown in the figure below. you can use dynamic CSS frames to create beautiful Forms, text containers and image containers.



In this tutorial I have introduced a technique to make beautiful, good looking and auto adjustable image CSS frame container which has flexible width characteristics. It means you can increase or decrease the width and frame will be re-sampled and the frame will be properly shaped again hence no loss in shape or quality of the frame.

Leave a Reply

Your email address will not be published. Required fields are marked *