Tagged: catch inspire
- This topic has 6 replies, 2 voices, and was last updated 4 years, 9 months ago by Skandha.
-
AuthorPosts
-
February 25, 2019 at 4:08 pm #166685catwingzParticipant
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?February 26, 2019 at 12:43 am #166708SkandhaParticipant@catwingz: Hello there,
I will look into the issue and get back to you soon.Kind Regards,
SkandhaFebruary 27, 2019 at 11:47 pm #166884SkandhaParticipant@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,
SkandhaFebruary 28, 2019 at 11:29 am #166925catwingzParticipantHi 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
March 4, 2019 at 11:16 pm #167214SkandhaParticipant@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,
SkandhaMarch 5, 2019 at 7:36 pm #167277catwingzParticipantHi 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!
March 7, 2019 at 1:13 am #167396SkandhaParticipant@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 -
AuthorPosts
- The topic ‘Give page an image border’ is closed to new replies.