Top and bottom border as image

Support
#1

Hello,
I am wondering if it is at all possible to make the top and bottom of a particular box have a specific look. Particularly, I would like to have them look like torn paper. Kind of like they are below the header on this site: http://eckmanfineart.com/.

I would love to have the top and bottom of my navigation box look kind of like that.

Is this at all possible?
Thank you for your help
Dylan Fleming

#2

Hello @asiostudio,

Thanks for asking. :slight_smile:

I can definitely point you towards right resource that will help you to achieve the look your looking. Please take a look at following snippets to have torn paper look:

https://codepen.io/dsm-webdsigner/pen/dYBRYw

You also have the open to use image as a background in case you don’t want to design the look and feel using pure CSS.

Thanks.

#3

Thanks for responding,
I’m afraid that you might have forgotten to include the link that you are referring to.

I would know a lot about that mistake, I make it a lot.

Looking forward to your reply
Dylan Fleming

#4

Hello @asiostudio,

I am really sorry for the same. I didn’t realized that shared codepen link is not showing up. Have updated the thread.

Thanks.

#5

While the codepen idea looks like a cool concept, I might need something a little less blocky for my solution.
I would like to try using an image for the background, but I would like to try it on the main content of the site. Would it be possible do apply an image to the top or bottom border of a section?

#6

Hi There,

Yes, you can apply the border-image property. If you need further assistance please provide us your site URL and images URL.

Thanks,

#7

This looks like it might work, but I have one more question: Is it possible to define an image for the top that is different from the one on the bottom? When I try to put in an image URL into the testing, it makes the top and bottom image be the same thing. I would like to have the paper be going outward from the box I am trying to define.

Here is a direct link to try their coding:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image2

Here is a link to the image I would like to use for the top:

And here is a link for the Bottom:

If both of these can’t be used, I wonder if it is at all possible to just use one for the top, but have it flip at the bottom.

Let me know your thoughts

#8

Hi There,

You need to pre-edit your borders, make it 1 image like a frame. Then play with that frame image here. When you found the right settings, copy the generated CSS and declare that as a class on Theme Options > CSS.

.my-custom-border{
/*GENERATED CSS HERE*/
}

Then apply that class (my-custom-border) to your box or container.

Hope that helps,
Cheers!

#9

With a little doing, this presented exactly the solution I was looking for.

Here is the result. eckman.asiostage.com/

Thank you so much for your help and patience.

Dylan Fleming

#10

Glad to hear that. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.