[catwingz]

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?

[Skandha]

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

Kind Regards,
Skandha

[Skandha]

@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

[catwingz]

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

[Skandha]

@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

[catwingz]

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!

[Skandha]

@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

[Author]

Posts