Photoshop Question posted in
The official user guide can be found here.

Complex image border, can this be made? – Photoshop

We designed a website in photoshop and now I’m trying to convert the design to a WordPress template. This is all going well, except for one thing. I’m not sure how to create this kind of border for my images. Could this be done by using a css/jquery trick? We created a border over the image. I’ve attached an image as an example.

This is the image

The background around the image has different colors.

Tags:

2

Answers


  1. 0

    You can use the CSS3 border-image property for this: http://www.w3schools.com/cssref/css3_pr_border-image.asp

    Here’s the css you’re probably looking for:

    img {
  /* Set border to 10px, make it transparent
     in case border-image isn't supported */
  border: 10px solid transparent;

  /* Set the image and make it stretch around
     the image evenly */
  border-image: url(border.png) 50% stretch;
}

    Edit: Another option would be to overlay the border over the image:

    #container {
  position: relative;
  width: 360px;
  height: 299px;
}
#container > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
    <html>
  <body>
    <div id="container">
      <img src="http://blog.protectedstatic.com/wp-content/uploads/2007/05/pointers.png" id="content" />
      <img src="http://www.clipartandgraphics.com/images/borders/bwwaves.gif" id="border" />
    </div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    If you need the border to automatically apply overlay on the image you could make the border a .png and use divs to layer them. See this example here: http://jsfiddle.net/sqJtr/961/

    Basically you have two divs, the main image and the overlay. The main image is what the client would upload to:

    #main_image{
    width: 100%;
    height: 100%;
    background-image: url("https://pbs.twimg.com/profile_images/378800000072921331/ecb6edfa73f25a3857df7991f1466962.jpeg");
}

    The overlay image is the frame .png file you yourself add:

    #overlay_image{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 256px;
    height: 256px;
    background-image: url("http://uxrepo.com/static/icon-sets/windows/png32/256/000000/border-inner-256-000000.png");
}

    This is just one option for how to get this done. Using this method the images do have to be a uniform size so this may not help you get the result you’re looking for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search