• Tried to find info on this in the codex and forums. I’m not adding a border to images. I am using an image file to create a border around the body of my blog.

    The images are png files (5px x 5px) that when repeated will make a border design on the left, right and bottom of the body of the blog (not the top). My theme image folder has the following files ready to go:
    leftborder.png
    rightborder.png
    bottomborder.png

    Do you know the correct code to create this border? It must be something simple.

    I tried many versions and punctuations of the following but not one worked.
    border-left: url(images/leftborder.png) repeat;
    border-left: url(images/leftborder.png) 5px x-repeat;
    border-left: url(images/leftborder.png); 5px; x-repeat;

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter ta100

    (@ta100)

    Thread Starter ta100

    (@ta100)

    is anyone reading this?

    Perhaps what you want is explained here – just a guess on my part, though.

    Thread Starter ta100

    (@ta100)

    That is interesting, thanks. However, I am not putting borders on images. I’m putting borders around the body of the blog itself. That is, the border of the blog (on the left, right and bottom sides) will be made from separate image files. Does anyone knows the code for this?

    Thread Starter ta100

    (@ta100)

    FYI I am now using WP 2.9

    I realized it wasn’t exactly what you needed, but thought maybe it had a technique that you could use. Sorry it didn’t help.

    At least it popped you back to the top.

    Thread Starter ta100

    (@ta100)

    lol, thanks. ??

    See here for valid border properties.
    https://www.w3schools.com/css/css_border.asp

    Thread Starter ta100

    (@ta100)

    This is an interesting problem.

    I’m still reviewing the complex but interesting link, vtxyzzy, in case somehow I can adjust it to borders.

    I find no options for using images as borders in the w3schools border properties and styles. Yet I see them on websites. I don’t have the URL of the websites but will try to find them and see if I can check their stylesheets, if it’s on there.

    That is the cutest kitten, t31os_.

    Thread Starter ta100

    (@ta100)

    I can make solid borders of a color without pics, but I want them made of pics. Anyone want to tackle this?

    Thread Starter ta100

    (@ta100)

    I found an easy solution. It’s not the perfect solution even for this particular purpose, but it does work. I believe there is a better solution out there meant to do the same thing without needing an excessively wide image, so I did not select that this issue is “resolved.”

    The following is added to whatever other css is inside body {…}

    background: url(images/yourimage.jpg) center repeat;
    Or if you are making the use of the transparency available in gif or png format, against a background color:
    background: #000000 url(images/yourimage.png) center repeat;

    If all of the following is met, this technique is for blogs:
    1. that run header to footer from the very top of the screen to the bottom, with no background margins above or below.
    2. needing only a left and right border.
    3. requiring a border that can only be created with an image using image editing software such as Photoshop.
    4. using a border design image that does not require much height (subjective), so it can be repeated continuously down the page.

    The parts of the background image that extend beyond the blog on each side create your border. In this case, I have made an image that is 1px high x 3500px wide. Surprisingly, this is still an insignificant number of pixels, slightly smaller than a tiny 60px x 60px image. The purpose of this enormously wide image is to more than cover (span left to right across) the largest computer monitors most people use. Since the image does not change in height, I only need one pixel of height. A border design could be anything or any size you want. I made it small because I don’t want to risk loading time, if there is a risk.

    Thread Starter ta100

    (@ta100)

    Postscript

    The best way to make the image is:
    1. Make a file the width of your blog.
    2. Take the width of the border you want (let’s say 10 pixel border) and double it. Therefore, the left and right borders total 20 pixels in this case. Now add the sum (20 pixels) to your canvas width of the image. In Photoshop: “Image” and then chose “Canvas Size…”
    3. Create your borders in the extra space (transparent) that you see on the left and right of your image file.
    4. Finally enlarge the canvas size to an even number (such as 3500), and make the rest of the image (beyond the border) however you want, such as solid color, or it could be another design/texture.

    Thread Starter ta100

    (@ta100)

    Note that as of December 23, 2009, please do not access the URL above because it may contain adult content.

    ^^ now you are tempting me to access that url.. lol kidding.. ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘using image files AS A BORDER to the blog’ is closed to new replies.