Trying to create the same border on different images

So a long time ago I had a code to place a “border” image and interchange the background image without needing to edit my photo every time. The border would be the same on whatever image I placed the class on…

EXAMPLE:

I want this image…

To be able to be placed overtop of whatever image I want with a simple code…

I know it can be done but for the life of me I cant find it.

Have you tried applying that image as a background to a containing <div> for your image?

So far I have this CSS

#imageborder img, #imageborder a img {
background: url(/wp-content/themes/version1/images/border.png)
 }

with this HTML

<div id="imageborder">
   <div id="backgroundimage">
      <img src="/wp-content/themes/version1/images/border_bg.png" width="33%"/>
   </div>
</div>

it shows the image BEHIND the picture but I need it in front to act as a border…

EXAMPLE:

example

The border-image properties may be what you want.
Will the pictures all be the same aspect ratio? If not it may be a little trickier, but it is possible to make image borders responsive and vary in aspect if the border images are carefully prepared.

See this older topic about image borders:-

And also this example Codepen showing a responsive image border example:-

3 Likes

Hi there thatwildhippie,

if you do not want to try, or are unable to implement
@SamA74’s example, then check out the attachment
for an alternative method. :winky:

border-image.zip (523.7 KB)

coothead

3 Likes

Thank you x10000!

Hi, Just want to mention that you wanted the image to be a “background” to the border. :slight_smile:

Following the suggestion given by @SamA74, a border-image on the image container and then, if you want the edge of the image flow under half the border, you could give the image a negative margin of half that border’s width.

(Also note that the suggestions uses class-names so you can have more than one image container on the page.)

1 Like

        Steady on there, don’t go wild. :sunglasses:
 
        But no problem, you’re very welcome. :winky:
 
 
        coothead

1 Like

Again using image-border:-

So no need for adding any extra div, the border is a property of the containing figure element to which the class is applied.
You will see some stretching as it strays from the square aspect, but it should not be too noticeable on a static screen as most will see it.

5 Likes

Here is another example using your posted border image, though I think you’ve already got good answers from @coothead and @SamA74 . :slight_smile:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Border Image Pseudo Overlay</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<style>
.gallery {
  text-align:center;
}
.image-border {
  position:relative;
  display:inline-block;
  padding:20px; /* to "inset" this image-border, aligning its middle with the image's edge */
  outline:1px solid red; /* just a temporary display of dimensions */
}
.image-border::after {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border:70px solid;
  border-image-source: url(./border.png); /* the OP border image example */
  border-image-width:70px; /* original width of the rose leaves, but the image will adapt to any width */
  border-image-slice:125; /* this includes the whole of the roses' intrinsic dimensions */
  border-image-repeat: repeat;
  content:"";
}
.image-border img {
  /* The style attributes in the html is only to display the fake images */
}
</style>
</head><body> 

<div class="gallery">
  <div class="image-border">
    <img style="display:block; background:aqua; color:navy; text-align:center; line-height:300px" src="" width="500" height="300" alt="Faux image it is">
  </div>
  <div class="image-border">
    <img style="display:block; background:gold; color:red; text-align:center; line-height:250px" src="" width="400" height="250" alt="Faux mage it is">
  </div>
  <div class="image-border">
    <img style="display:block; background:lime; color:teal; text-align:center; line-height:200px" src="" width="300" height="200" alt="Faux image it is">
  </div>
</div>

</body></html>
3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.