Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using Image as a Border of website

Using Image as a Border of website

Problem

I am creating a website for a Media Agency and I need to insert a Frame-type Border on the website. The website should look like a it is placed in Television. Television Image is a PNG with outer stuff and the inner part in transparent.

My website is at www.mediamantra.co/demo and I want the website to actually look like : This is the actual image that I want my website to look like

I think there is a z-index CSS property but it isn't useful. I would appreciate any suggestions and guidance.

Problem Courtesy of: Jiteen

Solution

Its looking nice..!! why you need to do such things?

Anyways, you can use a .png image to overlay the website and give your body a border to get spaces around four sides, like

body:before, body:after {
    content: "";
    position: fixed;
    background: #00;
    left: 0;
    right: 0;
    height: 10px; //according to your image
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900; //according to your image
    border-right: 10px solid #900;  //according to your image
}
Solution courtesy of: 4dgaurav

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using Image as a Border of website

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×