Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #166685
    catwingz
    Participant

    Hi,
    I am trying to place a repeating image border on the #page element. So far I am able to give it a color border, but I haven’t been able to make the image display.

    The ideal would be for it to be just on the left side, second choice on both the left and the right. I’d have to see it but suspect that all four sides would be too much. When I look at the selectors I have been unable to find code addressing what I am trying to do. This is what I have so far:

    #page {
    	border-image-source: url("http://dynamictherapies.net/wp-content/uploads/2019/02/vineBorder.png") ; 
      border-image-repeat: repeat; 
    }	

    The site is here
    Can you suggest a solution?

    #166708
    Skandha
    Keymaster

    @catwingz: Hello there,
    I will look into the issue and get back to you soon.

    Kind Regards,
    Skandha

    #166884
    Skandha
    Keymaster

    @catwingz: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    #page {
    	    border-image-source: url("https://dynamictherapies.net/wp-content/uploads/2019/02/vineBorder.png");
    	    border-image-repeat: round;
    	    border-image-slice: 18;
    	    border-image-width: 18px;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #166925
    catwingz
    Participant

    Hi Skandha,

    I tried it but the image doesn’t appear. I feel like if it could at least display that it would be easier to get a handle on the repeat, etc.

    Thank you

    #167214
    Skandha
    Keymaster

    @catwingz: Hello there, I modified a bit of CSS on your site and the border image seems to be showing up well.
    Let me know if this is what you want.

    Kind Regards,
    Skandha

    #167277
    catwingz
    Participant

    Hi Skandha,

    That was a huge step in the right direction. I modified it to `#page {
    border-image-source: url(“https://dynamictherapies.net/wp-content/uploads/2019/02/vineBorder.png”);
    border-image-repeat: round;
    border-image-slice: 15;
    border-image-width: 18px;
    }`
    changing the figure for slice. The top and bottom are the only parts which are as intended, but after further experimentation the 15 seemed to be the closest it could get—still choppy.

    Then I decided to revisit background-image and tried this:

    #page {
    	background-image: url("https://dynamictherapies.net/wp-content/uploads/2019/02/vineBorder.png");
      background-repeat: repeat-y;
    }

    which does exactly what I had hoped to accomplish. Thank you very much for your help with this!

    #167396
    Skandha
    Keymaster

    @catwingz: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
    https://wordpress.org/support/theme/catch-inspire/reviews/#new-post
    Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a good day! 🙂

    Kind Regards,
    Skandha

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Give page an image border’ is closed to new replies.