|
|
|
January 25, 2009
|
The subject of this article is image framing on your web pages. It is an essential subject for our Contributor's sites. Images that are used for examples, are from one of our favorite categories, Rural Landscape
Please review these methods to to add emphasis and visual interest to your pages without increasing the page loading time. We provided some examples for image frames using CSS border & background-image properties. |
| We placed the image inside a container <div> and defined the css for this container as:
{border:#778888 1px solid; padding:10px; background:#eeeeee;width:150px;}
which means that the Background for this photograph is a light grey, and the frame itself has a 1 px border showing our FeaturePics brand color #778888. The image used for this example is: Falling Down Barn | You can cut and paste the code and try it yourself.
|
| This cool tiny border example we found at http://www.pixelpusher.biz/examples/dotted/. (Just changed the background image to match our Corporate colors)
A small background image has been applied as background for container div. with 1 px padding.
The "background-repeat" property is "repeat", the background image is repeated horizontally and vertically. The "repeat" value for the "background-repeat" property makes the background image repeat horizontally and vertically, creating a single band of images from one side to the other. The image used for this example: Two Old Windows | | |
| Addition of a 3px white border has been applied to this image.
You can vary the background image to change dotted line pattern and color.
To make life easier you can change the style in the first example as "border:#778888 1px dotted;", and you will have a nice plain dotted border around the image. The image used for this example: Grazing Horses | | |
| In this example we set the background properties to pull our image (../illustrations/bg1.jpg) into the background of the container div.
The CSS background properties are set as:
"background-image: url(../illustrations/bg1.jpg); background-repeat:no-repeat;"
The "background-repeat" property ensures the image only appears once. The image used for this example: Hay Bales In Field | | |
| The same CSS, but with different images as background. Just start with your chosen image or photo, wrap it with the div, and apply CSS with "background-image: url(yourimage); background-repeat:no-repeat;". Center the position of your photo with the "padding" property. | | | | | The images used for thes examples: Old Barn And Teepees, Old Appalachian Barns, Countryside Ranch |
| This example uses the Shadow Filter to create the illusion of a shadow. If you don't see the shadow - it means your browser is not IE. CSS Shadow filter applied to the first <div> container. The second div container provides a border around the image. The image used for this example: Old Barn | | |
| If you want to have a CSS shadow effect, but your browser is not IE - try this example. This one is not so fancy, but still provides the illusion of shadow. The inner <div> container has an offset of -3px. The outer <div> provides this "like shadow" effect. The image used for this example: Faded Glory | | |
You can find different types of frames for your images in our category Templates (use "frames" as a key word).
Here are some examples below. |
|
|