Graphic Image Border

[noel_x99]

I'm trying to use CSS to use an image for the right border for a picture.

I'm making a site for a scrapbook store and I want a "decorative border" on the photos. I want to avoid having to edit each image to make it look good. I'm hoping to do something with CSS.

The border-right-image tag in this draft of CSS 2 from WC3 in 2002 seems to do what I want. (http://www.w3.org/TR/2002/WD-css3-border-20021107/) Can this be done?

If this can't be done, do you have an idea of the best way to handle it.

Thanks!

[weslinda]

Do the pictures vary in size? I would think it would be easier to do an image as a background on the CSS and align it to the right.

If your images are a fixed width and height, then you could simply create a simple background image with your border on the right.

Examples of the images you are using would help us understand the project.

[noel_x99]

I don't have the images yet, but I doubt I could make them all the same size.

Here's an example of what I'm trying to do:
www.janescomputersmadeeasy.com/home-image-scallopped.jpg

[weslinda]

The pictures would be the same width? To do the "bacground image" like I was discussing, they would basically need to be the same width.

[webhost1]

You might ask Brian Mark on this. He was working with css on part of a site and wanted it to do certain things. He might beable to answer you question on this.

Why not just take a background pic and over lap your pic you want shown?

[noel_x99]

If I can restrict the size of all of the images to the same width, that would probably be a good solution. I was hoping to allow for flexibility.

I suppose I could take the background idea a step further and make 3 or 4 widths and make all images fit into one of those "pre-sets".

[weslinda]

Yup, that would work as well. Just remember that your background has to be the extra width so your border shows up.

Hope it works out for you.

[weegillis]

Originally Posted by weslinda

Do the pictures vary in size? I would think it would be easier to do an image as a background on the CSS and align it to the right.

If your images are a fixed width and height, then you could simply create a simple background image with your border on the right.

The actual size could vary in carefully crafted containers, and still have the right-hand border effect. Consider, for example,

div.container{
	color:inherit;
	background:rgb(204,237,237) url(right_border_fill_image.gif) repeat-y 100% 0%;
	}
div.container img{
	margin:10px 15px 10px 0px;
	}

The image and its margins will push out the container to the appropriate height and width. Rather than one image for the border, of fixed height, one of about 20 pixels width and 10-15 pixels in height would repeat as needed to fill the right side of the container.

[noel_x99]

THANKS weegillis! That's exactly what I was trying to do. I have it working on my page.

[weegillis]

The container may be any block level element; a heading, paragraph, list and/or list item, form, blockquote, etc., even line breaks and horizontal rules. Add to this, most inline level elements can be made into block level with CSS.

For tight fit, you may still use variable size images. Just truncate the left side (or right as applies) of images wider than what the layout permits.

These would be my considerations to build on the version above:

* Set width percentage for all browsers.
* Set min-width, max-width to get a predictable layout in the standards compliant browsers.
* Set overflow:hidden; since height is not set, only leftbound edge will be clipped.
* Set text align right.
* Set image to display inline so it respects the text alignment.

So the above becomes,

div.container{
   width:25%;
   min-width:200px;
   max-width:300px;
   overflow:hidden;
   text-align:right;
   color:inherit;
   background:rgb(204,237,237) url(right_border_fill_image.gif) repeat-y 100% 0%;
   }
div.container img{
   display:inline;
   margin:10px 15px 10px 0px;
   }

Bear in mind that you need only a single container in this example, with no limit on how many images you stack into it, making it structurally very simple with really portable code.

Now it gets better... If you wanted a border all around, and to be able to tight-fit your image (left, right or center aligned) you could make the image a CSS background. This is a handy way to get rid of image tags in a layout. Consider, for example,

div.container span{
   display:block;
   width:100%;
   height:150px; /* set to image height */
   margin:0px;
   border:10px solid rgb(204,237,237);
   border-right-width:0px; /* or border-right:none */
   background:transparent url(visual_value_only.jpg) no-repeat 90% 0%;
   }

Further, with a couple of tweaks we can stretch this into the realm of multiple objects by giving the span a class which is assigned a specific image and corresponding height:

div.container span{
   display:block;
   width:100%;
   margin:0px;
   border:10px solid rgb(204,237,237);
   border-right-width:0px;
   }
div.container span.visual_a{
   height:150px; 
   background:transparent url(visual_a.jpg) no-repeat 90% 0%;
   }
div.container span.visual_b{
   height:120px; 
   background:transparent url(visual_b.jpg) no-repeat 90% 0%;
   }

Now the image can be any size, and will only be clipped on the left side, without affecting the border. The height must be specified. Position is set to 90% to allow 20px right margin for border background at min-width, 30px at max-width. Your border image would need to be minimum 30px to meet the full requirements of the layout being considered.

To center horizontally, set the first percentage to 50%. This will clip both right and left.

The same applies when the height is fixed. Set the second percentage accordingly, depending on what portion of the image you are willing to sacrifice in the truncation.

Most importantly, using background images should only be considered for the 'non-descriptive, visual value' images. If the image is central to the content, img tags should be used. The alt text (and title text) is available to spiders and screen readers.

On the other hand, most newer browsers will recognize a title attribute in most element, so a descriptive title can still be used in the span tags used above. Then there is always the text that you can insert in the empty span, and style for fit and finish.

There is still no way to physically associate the text to the actual image in the background, though, no matter how much the title or span text describes it, so go with care. Layout and visual value only is the best rule.

Truly powerful stuff in creative hands... would you agree?

Cheers, Roy