Image page border

I need to make a simple website by using html and CSS. What I have to do is: I need to take an image and make it a page-border.

So I can’t show you guys what I have done until here. Because I did not know exactly where to start. But if I correctly understand. I have to put the picture in the html code. Then design it in the CSS file. But how and which codes?

<p><img src="images/logo.gif" alt="Head First Lounge" /></p>

But in CSS, I don’t have that.

Thank you.

Answer

I guess what you are looking for is border-image property.

div {
    border:5px solid transparent;
    border-image: url(http://www.kswholesaletile.com/images/kswt-theme/diamond-tile-432x432.jpg) 10 10 round;
}

Demo

Just make sure you also use prefixed properties to support older browsers i.e -moz or -webkit

Leave a Reply

Your email address will not be published. Required fields are marked *